#18673 closed defect (fixed)
dijit/form/_AutoCompleterMixin | _TextBoxMixin regression with "input" event listeners
Reported by: | Adrian Vasiliu | Owned by: | bill |
---|---|---|---|
Priority: | undecided | Milestone: | 1.8.11 |
Component: | Dijit - Form | Version: | 1.10.4 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description (last modified by )
This is reproducible with master and the 1.10 branch, presumably also with the 1.9 and 1.8 branches. I entered version=1.10.4 because I didn't see a better choice available such as "master".
When a widget based on dijit/form/_AutoCompleterMixin is used with a listener on "input" events, when the user enters a character in the input field the following error is raised:
Uncaught TypeError?: Cannot read property 'charOrCode' of undefined
The error is thrown by dijit/form/_SearchMixin._processInput():
_processInput: function(evt){ if(this.disabled || this.readOnly){ return; } var key = evt.charOrCode; // error here, evt is undefined ... }
which is called by dijit/form/_TextBoxMixin._onInput() which passes undefined for the event argument:
_onInput: function(){ this._lastInputEventValue = this.textbox.value; // For Combobox, this needs to be called w/the keydown/keypress event that was passed to onInput() this._processInput(this._lastInputProducingEvent); ... }
The issue seems to be a side-effect of https://github.com/dojo/dijit/commit/054073823470949ace3003f20fdb66ea5e470670 - similar commits in 1.10, 1.9, and 1.8 branches - in the context of #14703).
How to reproduce: Load https://github.com/AdrianVasiliu/dijit/blob/autocompleter-textbox-issue/tests/form/AutoCompleterMixin.adrian.html in a browser (reproduced in several desktop and mobile browsers), type a character in the input field and check the console => the error mentioned above shows up.
This test file is a modified version of https://github.com/dojo/dijit/blob/master/tests/form/AutoCompleterMixin.html. The changes consist in:
- (for simplicity) removing all but one dijit widget based on _AutoCompleterMixin and _TextBoxMixin
- ensuring the input field is initially empty, and
- adding to the widget a listener for "input" events.
The issue also impacts dojox/mobile widgets using these dijit/form mixins via dojox/mobile/SearchBox. It prevents for instance to perform the filtering of a List using the FilteredListMixin? - however, on the dojox/mobile side this is reproducible only with same mobile browsers.
Change History (20)
comment:1 Changed 7 years ago by
Description: | modified (diff) |
---|---|
Owner: | set to wkeese |
Status: | new → assigned |
comment:2 Changed 7 years ago by
comment:3 Changed 7 years ago by
Milestone: | tbd → 1.8.11 |
---|
comment:4 Changed 7 years ago by
Owner: | changed from wkeese to bill |
---|
comment:5 Changed 7 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:9 Changed 7 years ago by
Thanks Bill. This fixes fine the test case I initially submitted. Unfortunatelly, it does not fix the similar error that I still get with dojox/mobile/SearchBox - which, for some reason, only hurts on some mobile browsers. I was finally able to create a "pure dijit" test reproducing it: https://github.com/AdrianVasiliu/dijit/blob/autocompleter-textbox-issue/tests/form/aTestAdrian1.html
It is a very reduced variant of a custom widget with the same inherintence from dijit mixins as dojox/mobile/SearchBox.
Using this sample on at least Chrome / HTC One X / Android 4.2.2 or Chrome / Nexus 5 / Android 6 preview, the console shows the same error when typing into the input field. Note it does not hurt on Chrome / Win, nor on HTC One X using stock browser.
comment:10 Changed 7 years ago by
OK, does it reproduce in the emulator? If so, what are the exact settings that you used? Preferably something that reproduces out of the box, without having to install chrome from the app store.
comment:11 Changed 7 years ago by
Chrome is mandatory for reproducing. Strangely, even the emulator of Nexus 5 (either Android 5 or 6) comes with stock browser, not Chrome. I was able to install Chrome (downloading the apk then installing with adb command), but... for nothing, because the issue didn't hurt the emulator (tried with Android 6 on Nexus 5 emulator). Also tried with latest Chrome on iOS 8 / iPhone 6, doesn't reproduce either.
So, sadly, Chrome on a physical Android device seems needed for reproducing. I reproduce with Android 4.x (4.2.2 on HTC One X), 5.x (5.1 on Nexus 5) and 6.x (6.0-preview on Nexus 5). Might hold for Chrome on other devices than HTC One X or Nexus5. No chance to get your hands on an Android device on your side?
comment:12 Changed 7 years ago by
Ah OK I have a very old and almost broken phone where I reproduced it. It's happening because typing normal keys (like abcdefg) produces keydown events but not keypress events, so this._lastInputProducingEvent is never set.
Why are there no keypress events? My guess is because of the phone's word suggestions / predictive text, where the characters you type are tentative (and underlined) until you select something from the multiple choice suggestion menu, similar to http://www.techrepublic.com/article/pro-tip-get-more-word-suggestions-from-your-android-keyboard/. You can check if turning off that feature works around the problem for you. (I can't seem to turn it off on my phone, but my phone is Japanese.)
comment:13 Changed 7 years ago by
Good guess! Turning off auto-corrections works it around (at least on Android 5.1 / Nexus 5).
comment:14 Changed 7 years ago by
This might be related: https://code.google.com/p/chromium/issues/detail?id=118639 It's an old Chrome issue (opened in 2012) but there have been comments starting in January 2015 (from https://code.google.com/p/chromium/issues/detail?id=118639#c209) about composition events, about Google's clame that only hardware keyboard need to send keycodes, not software keyboards etc...
comment:15 Changed 7 years ago by
PR at https://github.com/dojo/dijit/pull/99.
That chromium ticket does seem related, but not sure. It's really long :-).
comment:16 Changed 7 years ago by
To recap here the test results for https://github.com/dojo/dijit/pull/99:
a) Webapp in Chrome
- OK: Chrome 44 on Android 6.0 preview / Nexus 5
- OK: Chrome 44 on Android 5.1 / Nexus 5
- KO: Chrome 29 on Android 4.2.2 / HTC One X
- OK: Chrome 44 on Android 4.2.2 / HTC One X (that is, upgrading Chrome fixes it)
b) Hybrid with Cordova 5.1.1
- OK: Android 6.0 preview / Nexus 5
- OK: Android 5.1 / Nexus 5
- OK: Android 4.2.2 / HTC One X
I see, good catch. In your simplified test case the problem is presumably that you overrode
onInput()
and that prevents this _TextBoxMixin code from running:I don't know why I put that code to set
_lastInputProducingEvent
inside of a user-overridable function. Probably I should have put it right before the call toonInput()
.