[FIXED] [#1598] [4.7.0] Button not enabled after combobox has used Forceselection

Code:

---

<form id="form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:FormPanel runat="server" Width="500" DefaultButton="btnSave">
            <Items>
                <ext:TextField
                    runat="server"
                    AllowBlank="false"
                    FieldLabel="fieldlabel"
                    LabelWidth="130"
                    AnchorHorizontal="100%"
                    MaskRe="/[^<>]/">
                </ext:TextField>
                <ext:ComboBox
                    runat="server"
                    FieldLabel="fieldlabel"
                    AllowBlank="false"
                    LabelWidth="130"
                    AnchorHorizontal="100%"
                    TypeAhead="true"
                    ForceSelection="true">
                    <Items>
                        <ext:ListItem Text="BBBB" Value="1" />
                        <ext:ListItem Text="CCCC" Value="2" />
                        <ext:ListItem Text="DDDD" Value="3" />
                    </Items>
                </ext:ComboBox>
            </Items>
            <Buttons>
                <ext:Button ID="btnSave" runat="server" Text="Save" FormBind="true" />
                <ext:Button ID="btnCancel" runat="server" Text="Cancel" />
            </Buttons>
        </ext:FormPanel>

    </form>

---

In the Form, I fill in "a" in the textField and TAB, then fill in "a" in the combobox and TAB. ForceSelection clears the combobox. All normal but when I then choose a valid value for the combobox, it is not revalidated again and my saveButton stays disabled?

Hello @Selas! Welcome to Ext.NET forums!

That's a problem. Yes, a bug! In fact, I have tested this on current Ext.NET version and it still happens, unfortunately.

Fortunately, all that takes to get rid of the issue, is just give the form a "nudge" on the actual combo box' selection. So just give the combo box this select event listener, and the nudge would be just enough for the form to notice this edge case.

Code:

---

<Listeners>
    <Select Handler="this.checkValidityChange();" />
</Listeners>

---

This basically happens because of this "initially looking valid" state of the form. That is, it is not red on the fields initially albeit they being invalid. In the event you choose a value on the combo box, it is changing from value empty to empty, although you added a value therein. So it both triggers a form field change yet there were no changes, then the inconsistency begins, as when then you choose the combo box again and give it a value, it /thinks/ the validity change had already been changed to "valid" (yet, the "forceSelection" refused it, but it doesn't know!). So it just does not trigger again the validity change event, thus the form may know it is valid if you inquire (form.isValid() will return true), but it won't step thru the 'formBind' controls to enable them unless an actual "validityChange" event is triggered within the form.

The catch behind this, is that a "forceSelection" combo box theoretically can't be invalid, and this edge case where it could be initially empty was not considered. I actually believe it should not be allowed to be initially blank/empty, as it is just not among its values and it does not allow "custom values" to be added on-the-fly. It should instead just choose the first entry, and this situation would never happen.

In other words, the way you are using it is a way it was not supposed to be but alas, you can do it, so the framework should deal with that one way or another.

This issue has been logged after #1598 in our GitHub issues page. We'll post an update here as soon as the issue is fixed. Unfortunately I'm afraid the fix can't go to version 3.x, but it will for our latest 4.x branch, and we'll keep an eye open to whether Sencha accepts the issue on their own and ultimately fix it on their side.

I hope this helps!

Yes, it helped. Thank you!!

Glad it helped, thanks for the feedback!

Hello again!

I've just updated this thread, as I have mistakenly marked it as closed. Notwithstanding, the github issue was open for us to track it, so we didn't really miss the issue at all.

So, here's good and bad news about this issue.

Bad news is that unfortunately the issue comes from a new feature from Sencha, so it is probably only reproducible since Ext.NET 4.6.0 (Ext JS 6.5.3). And in fact, the issue is still reproduced down the path to the to-be-released Ext.NET 4.7.0, featuring Ext JS 6.6.0. Another bad news is that Sencha still didn't acknowledge the bug from the forum thread we opened to report the issue.

Well, and as for the good news, we found a very reliable fix to apply to the code, so the component should consistently validate, yet allowing the field to be initially blank (and look valid). Another option we were considering was to forcibly select the first entry if ForceSelection was true. While this makes sense, it would be rather a breaking change, we'd never be sure Sencha would adopt for themselves; so better not do that.

That said, Ext.NET 4.7.0 will have this issue fixed. I've updated this thred's title to reflect the issue and status assigned to it, and moved it to the 'bugs' forums, as it should have been done before.