You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
typeBook={author: string;title: string};constbooks: Book[]=[{author: 'Harper Lee',title: 'To Kill a Mockingbird'},{author: 'Lev Tolstoy',title: 'War and Peace'},{author: 'Fyodor Dostoyevsy',title: 'The Idiot'},{author: 'Oscar Wilde',title: 'A Picture of Dorian Gray'},{author: 'George Orwell',title: '1984'},{author: 'Jane Austen',title: 'Pride and Prejudice'},{author: 'Marcus Aurelius',title: 'Meditations'},{author: 'Fyodor Dostoevsky',title: 'The Brothers Karamazov'},{author: 'Lev Tolstoy',title: 'Anna Karenina'},{author: 'Fyodor Dostoevsky',title: 'Crime and Punishment'},];functiongetBooksFilter(inputValue: string|undefined){returnfunctionbooksFilter(book: Book){return(!inputValue||book.title.toLowerCase().includes(inputValue)||book.author.toLowerCase().includes(inputValue));};}exportconstExample=()=>{const[items,setItems]=React.useState(books);const[inputValue,setInputValue]=React.useState('');const{
isOpen,
getToggleButtonProps,
getLabelProps,
getMenuProps,
getInputProps,
getItemProps,
getComboboxProps,}=useCombobox<Book>({onInputValueChange(chg){setInputValue(chg.inputValue||'');setItems(books.filter(getBooksFilter(chg.inputValue)));},
inputValue,// Controlling inputValue here introduces IME composition issue
items,itemToString(item){returnitem ? item.title : '';},});return(<div><div><label{...getLabelProps()}>Choose your favorite book:</label><div{...getComboboxProps()}><inputplaceholder="Best book ever"{...getInputProps()}/><buttonaria-label="toggle menu"type="button"{...getToggleButtonProps()}>{isOpen ? <>↑</> : <>↓</>}</button></div></div><ul{...getMenuProps()}>{isOpen&&items.map((item,index)=>(<likey={`${item.title}${index}`}{...getItemProps({ item, index })}><span>{item.title}</span><span>{item.author}</span></li>))}</ul></div>);};
What you did:
When entering Japanese (or any IME language) into a combobox that controls inputValue, IME composition fails.
This first screenshot renders a dropdown with inputValue controlled. I clicked the input to focus it and then typed "j" + "a".
What happened:
The IME editor failed to open to further compose the characters before committing them. What I should have saw would have been this:
Additionally, it appears that the compositionend event is never fired when inputValue is controlled.
Problem description:
When useCombobox is controlling inputValue and updating it with onInputValueChange, IME composition exits before showing the composition editor.
Suggested solution:
Wrap getInputProps's onChange handler with the spirit of the following:
constonComposition=useRef(false);constgetOnChangeWithCompositionSupport=useCallback(({
onChangeProp,}: {onChangeProp: (e: ChangeEvent<HTMLInputElement>)=>void;})=>(event: ChangeEvent<HTMLInputElement>)=>{setInputValue(event?.target?.value);// IME method startif(event.type==='compositionstart'){onComposition.current=true;return;}// IME method endif(event.type==='compositionend'){onComposition.current=false;}// handle parent onChangeif(!onComposition.current){onChangeProp?.(event);}},[setInputValue]);
The text was updated successfully, but these errors were encountered:
Having the same issue here. Not a clean solution at all, but for now overriding the onChange input prop and controlling this value with useState fixes it.
downshift
version: 6.1.12node
version: 14.19.0yarn
version: 1.22.17Relevant code or config
What you did:
When entering Japanese (or any IME language) into a combobox that controls inputValue, IME composition fails.
This first screenshot renders a dropdown with
inputValue
controlled. I clicked the input to focus it and then typed "j" + "a".What happened:
The IME editor failed to open to further compose the characters before committing them. What I should have saw would have been this:
Additionally, it appears that the
compositionend
event is never fired when inputValue is controlled.Problem description:
When useCombobox is controlling
inputValue
and updating it withonInputValueChange
, IME composition exits before showing the composition editor.Suggested solution:
Wrap getInputProps's onChange handler with the spirit of the following:
The text was updated successfully, but these errors were encountered: