Input search breaks when dropdown is opened by arrow keys

[DarkMikey]

I recently implemented search to our single selects and came a across a bug, that occurs if you open the drop down by pressing arrow down. This leads to a broken search. You can't enter anything, cursor won't be displayed and if you click on the search input the drop down closes.

You can reproduce this at the first input under the headline "Single select input" at https://joshuajohnson.co.uk/Choices/

1. Click on the first single select which displays "This is a placeholder"
2. Click on any Choice (e.g. "choice 1")
3. Press arrow-down-key -> drop down opens with broken search. Couldn't get it to work beside reloading the page.

Greetings

edit:

[jshjohnson]

Closing as I cannot replicate this 👍

[DarkMikey]

@jshjohnson Not solved at all. I just followed my instructions again and the issue still persists. Please tell me if you need more info from my side.

[jshjohnson]

If you could provide a reduce test case highlighting the issue, that'd be great 👍

[DarkMikey]

Hope this helps. After reopening the dropdown with arrow-down key, search is not working anymore

[jshjohnson]

Which browser and OS are you using @DarkMikey ?

[DarkMikey]

Ah yeah sorry. Windows 10 64-Bit, Firefox 70.0.1 (64-Bit) and also Chrome Version 78.0.3904.87 (Official Build) (64-bit). Does this not happen for you?

[jshjohnson]

Yeah I cannot replicate this on Chrome (Mac OSX) - I'll be interested to know whether this is still an issue with the upcoming release as we made some changes to event listeners

[sachicortes]

The problem persists, I can confirm. I'm using Chrome Versión 76.0.3809.100 (Build oficial) (64 bits) in ubuntu 18.04. I have also tested it on browserstack with several other browsers (IE11, FF70 and others). It happens when you toggle the dropdown with the down arrow key while the focus is on the choices element. After this all event listeners attached to the input stop working and can't be focused. It happens on the single select input.

[DarkMikey]

So, can we re-open this?

[dirkjf]

The problem is String.fromCharCode(keyCode) is unreliable. For the arrowUp key (code 38) this returns & and for arrowDown (code 40) this returns (. This then returns true for wasPrintableChar which causes this bug.

[dirkjf]

const wasPrintableChar =
  (keyCode > 47 && keyCode < 58)   || // number keys
  (keyCode == 32)   ||                // spacebar
  (keyCode > 64 && keyCode < 91)   || // letter keys
  (keyCode > 95 && keyCode < 112)  || // numpad keys
  (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
  (keyCode > 218 && keyCode < 223);   // [\]' (in order)

Something like this would solve this bug. But maybe opening the dropdown on focus and moving the focus to the input field would be a better solution? This would allow any character to be used. You could then use exceptions for keys like ArrowUp, ArrowDown, Tab, Delete and Enter for the required different behaviours.

[ConceptImage]

Any update on this ? I'm struggling with the same issue with arrow keys, or "Windows" keypress reopening the search input and writing "meta" on it, using choiceS.js 10.2.0

[authanram]

I can confirm with 10.2.0 on macos, Chrome Version 119.0.6045.199 (Official Build) (arm64).

It's pretty simple to reproduce. Just focus the field via "tab" and then press "arrowdown".

Command key on mac does it also, it just fills in the key code "meta".

The field is not longer working afterwards. Clicking the input will close the field. So the page needs to be reloaded to reset it.

I noticed it while using https://filamentphp.com/.

[RuzgarDogu]

Hello, I encountered the same issue and struggled to find a solution. However, I managed to devise a workaround that may be helpful:

export const loadChoices = async (node) => {
	if (typeof window !== 'undefined') {
		const Choices = (await import('choices.js')).default;
		let c = new Choices(node, { 
			placeholder: false, 
			itemSelectText: '', 
			searchFields: ['label'], 
			searchPlaceholderValue: 'Search here...',
			callbackOnInit: function() {
				let container = this.containerOuter.element
				container.addEventListener('focus', () => {
					this.showDropdown()
				}, true); // Use capture phase
			}
		});
		return c;
	}
};