diff --git a/app/javascript/components/ComboMultipleDropdownList.js b/app/javascript/components/ComboMultipleDropdownList.js
new file mode 100644
index 000000000..4665fe2a6
--- /dev/null
+++ b/app/javascript/components/ComboMultipleDropdownList.js
@@ -0,0 +1,217 @@
+import React, {
+ useMemo,
+ useState,
+ useRef,
+ useContext,
+ createContext,
+ useEffect,
+ useLayoutEffect
+} from 'react';
+import PropTypes from 'prop-types';
+import {
+ Combobox,
+ ComboboxInput,
+ ComboboxList,
+ ComboboxOption,
+ ComboboxPopover
+} from '@reach/combobox';
+import '@reach/combobox/styles.css';
+import matchSorter from 'match-sorter';
+import { fire } from '@utils';
+
+const Context = createContext();
+
+function ComboMultipleDropdownList({
+ options,
+ hiddenFieldId,
+ selected,
+ label
+}) {
+ if (label == undefined) {
+ label = 'Choisir une option';
+ }
+ if (Array.isArray(options[0]) == false) {
+ options = options.map((o) => [o, o]);
+ }
+ const inputRef = useRef();
+ const [term, setTerm] = useState('');
+ const [selections, setSelections] = useState(selected);
+ const results = useMemo(
+ () =>
+ (term
+ ? matchSorter(
+ options.filter((o) => !o[0].startsWith('--')),
+ term
+ )
+ : options
+ ).filter((o) => o[0] && !selections.includes(o[1])),
+ [term, selections]
+ );
+ const hiddenField = useMemo(
+ () => document.querySelector(`input[data-uuid="${hiddenFieldId}"]`),
+ [hiddenFieldId]
+ );
+
+ const handleChange = (event) => {
+ setTerm(event.target.value);
+ };
+
+ const saveSelection = (selections) => {
+ setSelections(selections);
+ if (hiddenField) {
+ hiddenField.setAttribute('value', JSON.stringify(selections));
+ fire(hiddenField, 'autosave:trigger');
+ }
+ };
+
+ const onSelect = (value) => {
+ let sel = options.find((o) => o[0] == value)[1];
+ saveSelection([...selections, sel]);
+ setTerm('');
+ };
+
+ const onRemove = (value) => {
+ saveSelection(
+ selections.filter((s) => s !== options.find((o) => o[0] == value)[1])
+ );
+ inputRef.current.focus();
+ };
+
+ return (
+
+ Aucun résultat{' '}
+
+
+ {selections.map((selection) => (
+
+