Behavior bugfixes

This commit is contained in:
Rainer Simon 2020-07-09 17:51:43 +02:00
parent 1413136d59
commit 89809ad197
3 changed files with 13 additions and 6 deletions

View File

@ -12,6 +12,7 @@ const Autocomplete = props => {
const onInputValueChange = ({ inputValue }) => { const onInputValueChange = ({ inputValue }) => {
props.onChange(inputValue); props.onChange(inputValue);
setInputItems( setInputItems(
props.vocabulary.filter(item => props.vocabulary.filter(item =>
item.toLowerCase().startsWith(inputValue.toLowerCase()))) item.toLowerCase().startsWith(inputValue.toLowerCase())))
@ -26,11 +27,18 @@ const Autocomplete = props => {
getItemProps, getItemProps,
} = useCombobox({ items: inputItems, onInputValueChange }); } = useCombobox({ items: inputItems, onInputValueChange });
// TODO onEnter?
const onKeyDown = evt => { const onKeyDown = evt => {
// Only forward key events if the dropdown is closed, or no option selected) if (evt.which == 13) {
if (!isOpen || highlightedIndex == -1) if (!isOpen || highlightedIndex == -1) {
setInputItems([]); // To prevent the popup from showing up afterwards
props.onKeyDown(evt); props.onKeyDown(evt);
} }
} else if (evt.which == 40 && props.content.length == 0) {
// To make options appear on key down
setInputItems(props.vocabulary);
}
}
return ( return (
<div ref={element} className="r6o-autocomplete"> <div ref={element} className="r6o-autocomplete">

View File

@ -25,7 +25,6 @@
padding:0; padding:0;
list-style-type:none; list-style-type:none;
background-color:#fff; background-color:#fff;
min-width:100%;
border-radius:3px; border-radius:3px;
border:1px solid #d6d7d9; border:1px solid #d6d7d9;
box-sizing:border-box; box-sizing:border-box;

View File

@ -15,7 +15,7 @@
} }
ul.r6o-taglist { ul.r6o-taglist {
flex:1; flex:0;
white-space:nowrap; white-space:nowrap;
li { li {
@ -88,7 +88,7 @@
} }
.r6o-autocomplete { .r6o-autocomplete {
flex:2; flex:1;
li { li {
font-size:14px; font-size:14px;