Controlled inputValue doesn't wait for accented characters on Mac

[lourenci]

• downshift version: 3.2.10
• node version: 8.10.0
• npm (or yarn) version: yarn 1.16.0

This problem only happens in Mac with dead keys keyboard (like Portuguese). In these keyboards the user has to press two keys to accent a word.

When controlling a inputValue, the component doesn't wait for a second word when pressing a dead key. This doesn't happen with the selectedValue prop.

I've changed the Kent Dodds example to simulate that.

[weyert]

Yes, to reproduce this easily:

• If you press option-e and then the character e you should get é but you get ´é instead.

[weyert]

I think for this we might need to ignore the KeyboardEvent when isComposing is true as this used to indicate a composition is happening. See also: https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event

[silviuaavram]

please re-open this and submit a fix if any.

[luis-f-lins]

Any update on this issue? I'm having the same issue here.

[silviuaavram]

Maybe this PR https://github.com/downshift-js/downshift/pull/993 will help fix it since it appears to be the same issue. @luis-f-lins can you create a PR?

[alexhoma]

Hi, I'm having the same issue with Downshift version 6.1.7. Any update on this?

[francisprovost]

Hi,

I found a workaround that worked in my use case but might not be valid for everyone.

I have a autocomplete component connected with an API. To make it work I sync the value via onInputValueChange to my state but I do not send it back to useCombobox trough the inputValue property. That way useCombobox is the one that manages the state and I still have the value to call my API. It is not perfect because I'll have searches done with characters like "^" or "¨" (even when debounce with slow typers) but it's at least functional.

I personally think that onInputValueChange should not be triggered when the input is "waiting" for the second key.