Merge pull request #6224 from betagouv/main

2021-05-21-01
This commit is contained in:
Kara Diaby 2021-05-21 12:45:38 +02:00 committed by GitHub
commit a59aae07c4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 43 additions and 12 deletions

View file

@ -19,6 +19,7 @@ import '@reach/combobox/styles.css';
import { matchSorter } from 'match-sorter';
import { fire } from '@utils';
import { XIcon } from '@heroicons/react/outline';
import isHotkey from 'is-hotkey';
const Context = createContext();
@ -83,7 +84,12 @@ function ComboMultipleDropdownList({
};
const onKeyDown = (event) => {
if (event.key === 'Enter') {
if (
isHotkey('enter', event) ||
isHotkey(' ', event) ||
isHotkey(',', event) ||
isHotkey(';', event)
) {
if (
term &&
[...extraOptions, ...options].map(([label]) => label).includes(term)
@ -94,12 +100,26 @@ function ComboMultipleDropdownList({
}
};
const saveSelection = (selections) => {
setSelections(selections);
const onBlur = (event) => {
if (
acceptNewValues &&
term &&
[...extraOptions, ...options].map(([label]) => label).includes(term)
) {
event.preventDefault();
return onSelect(term);
}
};
const saveSelection = (fn) => {
setSelections((selections) => {
selections = fn(selections);
if (hiddenField) {
hiddenField.setAttribute('value', JSON.stringify(selections));
fire(hiddenField, 'autosave:trigger');
}
return selections;
});
};
const onSelect = (value) => {
@ -107,15 +127,15 @@ function ComboMultipleDropdownList({
([val]) => val == value
);
const selectedValue = maybeValue && maybeValue[1];
if (value) {
if (selectedValue) {
if (
acceptNewValues &&
extraOptions[0] &&
extraOptions[0][0] == selectedValue
) {
setNewValues([...newValues, selectedValue]);
setNewValues((newValues) => [...newValues, selectedValue]);
}
saveSelection([...selections, selectedValue]);
saveSelection((selections) => [...selections, selectedValue]);
}
setTerm('');
};
@ -123,8 +143,12 @@ function ComboMultipleDropdownList({
const onRemove = (label) => {
const optionValue = optionValueByLabel(label);
if (optionValue) {
saveSelection(selections.filter((value) => value != optionValue));
setNewValues(newValues.filter((value) => value != optionValue));
saveSelection((selections) =>
selections.filter((value) => value != optionValue)
);
setNewValues((newValues) =>
newValues.filter((value) => value != optionValue)
);
}
inputRef.current.focus();
};
@ -149,10 +173,11 @@ function ComboMultipleDropdownList({
value={term}
onChange={handleChange}
onKeyDown={onKeyDown}
onBlur={onBlur}
autocomplete={false}
/>
</ComboboxTokenLabel>
{results && (
{results && (results.length > 0 || !acceptNewValues) && (
<ComboboxPopover className="shadow-popup">
{results.length === 0 && (
<p>

View file

@ -19,6 +19,7 @@
"email-butler": "^1.0.13",
"highcharts": "^8.1.1",
"intersection-observer": "^0.12.0",
"is-hotkey": "^0.2.0",
"mapbox-gl": "^1.3.0",
"match-sorter": "^6.2.0",
"prop-types": "^15.7.2",

View file

@ -6982,6 +6982,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
dependencies:
is-extglob "^2.1.1"
is-hotkey@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/is-hotkey/-/is-hotkey-0.2.0.tgz#1835a68171a91e5c9460869d96336947c8340cef"
integrity sha512-UknnZK4RakDmTgz4PI1wIph5yxSs/mvChWs9ifnlXsKuXgWmOkY/hAE0H/k2MIqH0RlRye0i1oC07MCRSD28Mw==
is-installed-globally@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"