Behavior bugfixes
This commit is contained in:
parent
1413136d59
commit
89809ad197
|
@ -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,10 +27,17 @@ 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) {
|
||||||
props.onKeyDown(evt);
|
setInputItems([]); // To prevent the popup from showing up afterwards
|
||||||
|
props.onKeyDown(evt);
|
||||||
|
}
|
||||||
|
} else if (evt.which == 40 && props.content.length == 0) {
|
||||||
|
// To make options appear on key down
|
||||||
|
setInputItems(props.vocabulary);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue