Hello,
If a Form Field is in a deck it (particularly Text/Textarea) loses focus if user stops writing for 0.5~ (too quick) seconds, hopefully it wouldn’t lose focus at all.
Custom input fields lose focus after one letter.
Reason: once field determined that user has stoped entering data it will call (I assume) onInput which would update the data in the model. Afterwards, (I assume) deck listens for changes in the model and re-renders all of the child components and maybe itself.
Potential workaround, but if anything else causes the model to update then all changes will be reverted (as component is re-rendered), and I’m not able to anticipate all changes. Next level would be to call this after deck has re-rendered, but unsure which function call to override. Another assumption: onInput/onBlurdoesn’t do anything different from the template generated by CustomFieldRenderer.
skuid.runtime.getPage('Temp_Page_5_v2').component.getByType()[<componentType>].forEach((c) => {
if(c._cpi.onInput ){
c._cpi.onBlur = c._cpi.onInput.bind({})
c._cpi.onInput = undefined}});
Skuid v2, version 13.0.12.
Page XML:
<skuid__page unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" showheader="true">
<models>
<model id="UIModel" limit="20" query="true" datasource="Ui-Only" createrowifnonefound="true">
<fields>
<field id="NewField" displaytype="TEXT" length="255"/>
<field id="NewField1" displaytype="TEXT" length="255"/>
</fields>
<conditions/>
<actions/>
</model>
</models>
<components>
<skuid__header title="Form Inside of Deck" uniqueid="sk-1d28-19434"/>
<skuid__buttonSet uniqueid="sk-1d0f-4549">
<groups>
<skuid__buttonGroup uniqueId="sk-1d0f-4547">
<buttons>
<skuid__button label="Add" uniqueId="sk-1d0f-4548">
<actions>
<action type="createRow" model="UIModel" appendorprepend="append" defaultmodefornewitems="edit" affectedrows="all"/>
</actions>
</skuid__button>
</buttons>
</skuid__buttonGroup>
</groups>
</skuid__buttonSet>
<skuid__deck columnGutter=".75em" rowGutter=".75em" model="UIModel" showSaveCancel="false" verticalAlign="top" minWidth="350px" uniqueid="sk-1d0c-3810" pageSize="10" setMaxWidth="auto">
<components>
<skuid__form showErrorsInline="true" model="UIModel" uniqueid="sk-1Xs0-4535" mode="edit">
<sections>
<section title="New Section" showHeading="false">
<rows>
<row>
<fields>
<skuid__field id="NewField" uniqueId="sk-1Xs7-7687">
<renderConditions logictype="and" onhidedatabehavior="keep"/>
<enableConditions logictype="and"/>
<styleVariantConditions/>
</skuid__field>
</fields>
</row>
<row>
<fields>
<skuid__field id="NewField1" uniqueId="sk-1Xs7-7692" displayAs="CUSTOM" fieldRenderer="newFieldRenderer"/>
</fields>
</row>
</rows>
</section>
</sections>
</skuid__form>
</components>
<filtering enableSearch="false"/>
<styles>
<spacing bottom="5"/>
</styles>
<interactions/>
</skuid__deck>
<skuid__header title="Form Outside of Deck" uniqueid="sk-1d2A-20458"/>
<skuid__form showErrorsInline="true" model="UIModel" uniqueid="sk-1d1--15753" mode="edit">
<sections>
<section title="Form outside of Deck" showHeading="false">
<rows>
<row>
<fields>
<skuid__field id="NewField" uniqueId="sk-1d1--15754"/>
</fields>
</row>
<row>
<fields>
<skuid__field id="NewField1" uniqueId="sk-1d1--15755" displayAs="CUSTOM" fieldRenderer="newFieldRenderer"/>
</fields>
</row>
</rows>
</section>
</sections>
</skuid__form>
</components>
<resources>
<labels/>
<javascript>
<jsitem location="fieldrenderer" name="newFieldRenderer" cachelocation="false" url="">
const FieldRenderer = skuid.component.FieldRenderer;
return new FieldRenderer({
editModeStrategy: "virtual",
edit: function (fieldComponent) {
let h = fieldComponent.h,
state = fieldComponent.state,
context = fieldComponent.cpi.getContext(),
{ field, model, row, value } = context;
console.log('testFieldRenderer');
return h("input",
{
styles: {
width: "100%",
height: "62px",
padding: "0 8px",
},
// Note that we can do more than just set styles.
// Here we set the input element's value, but we also
// write functions for oninput and onblur events.
value: value,
// This logic ensures the input element's value
// stays synchronized with the model the element
// is attached to.
oninput(event) {
model.updateRow(row,
{ [field.id]: event.target.value },
{ initiatorId: fieldComponent.id }
);
},
// onblur(event) {
// // Let the field component know focus has been lost. Doing so will give
// // the field component information needs to transition back to "read" mode,
// // if the field is set to be read with in-line editing.
// fieldComponent.cpi.onInputBlur();
// }
});
}
});</jsitem>
</javascript>
<css/>
<actionsequences/>
</resources>
<styles>
<styleitem type="background" bgtype="none"/>
</styles>
</skuid__page>
Best,
Lukas
