Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#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 Adrian Vasiliu)

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 4 years ago by Adrian Vasiliu

Description: modified (diff)
Owner: set to wkeese
Status: newassigned

comment:2 Changed 4 years ago by bill

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:

 onInput: function(/*Event*/ evt){
	 // summary:
	 //		Connect to this function to receive notifications of various user data-input events.
	 //		Return false to cancel the event and prevent it from being processed.
	 // event:
	 //		keydown | keypress | cut | paste | compositionend
	 // tags:
	 //		callback

	 this._lastInputProducingEvent = evt;
 },

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 to onInput().

comment:3 Changed 4 years ago by bill

Milestone: tbd1.8.11

comment:4 Changed 4 years ago by Adrian Vasiliu

Owner: changed from wkeese to bill

comment:5 Changed 4 years ago by Bill Keese <bill@…>

Resolution: fixed
Status: assignedclosed

In 563129c4745338d859d4b26460b225ff0a80955c/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:6 Changed 4 years ago by Bill Keese <bill@…>

In bc4a82d4d017509faededebbbdbad7c6054a25df/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:7 Changed 4 years ago by Bill Keese <bill@…>

In f3f10cc5be13c3cb2531c5cdbfe53b0fd0b55b3b/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:8 Changed 4 years ago by Bill Keese <bill@…>

In 74445e54eeb74821df470a25140bbbad248fa32c/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:9 Changed 4 years ago by Adrian Vasiliu

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.

Last edited 4 years ago by Adrian Vasiliu (previous) (diff)

comment:10 Changed 4 years ago by bill

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.

PS: I tried with the emulator but I didn't have any luck. The browser on the Android 6 emulator crashes on startup, and on Android 5.1 I didn't get any error in the console. I tried Android 4.2 but I couldn't figure out how to install chrome.

Last edited 4 years ago by bill (previous) (diff)

comment:11 Changed 4 years ago by Adrian Vasiliu

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 4 years ago by bill

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.)

Last edited 4 years ago by bill (previous) (diff)

comment:13 Changed 4 years ago by Adrian Vasiliu

Good guess! Turning off auto-corrections works it around (at least on Android 5.1 / Nexus 5).

comment:14 Changed 4 years ago by Adrian Vasiliu

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 4 years ago by bill

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 4 years ago by Adrian Vasiliu

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

comment:17 Changed 4 years ago by Bill Keese <bill@…>

In d428c3a5c3cbd6df347010cde62c3190cedab0ae/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:18 Changed 4 years ago by Bill Keese <bill@…>

In 09f3293ce152ebadeb4df7d2cbae1baf08f107fc/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:19 Changed 4 years ago by Bill Keese <bill@…>

In 23c79aa383159103bb9e7827c7c3c2b27edb4e07/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 

comment:20 Changed 4 years ago by Bill Keese <bill@…>

In 60065ec5b696c9f00c9c6f1d62333a726aad39a1/dijit:

Error: Processor CommitTicketReference failed
Unsupported version control system "git": Can't find an appropriate component, maybe the corresponding plugin was not enabled? 
Note: See TracTickets for help on using tickets.