accepte nouvelles valeurs pour ComboMultipleDropdownList

This commit is contained in:
Christophe Robillard 2021-02-16 14:15:34 +01:00 committed by Paul Chavard
parent 06e282b839
commit 8b55f67964
3 changed files with 42 additions and 7 deletions

View file

@ -25,7 +25,8 @@ function ComboMultipleDropdownList({
options,
hiddenFieldId,
selected,
label
label,
acceptNewValues = false
}) {
if (label == undefined) {
label = 'Choisir une option';
@ -36,6 +37,7 @@ function ComboMultipleDropdownList({
const inputRef = useRef();
const [term, setTerm] = useState('');
const [selections, setSelections] = useState(selected);
const [newValues, setNewValues] = useState([]);
const results = useMemo(
() =>
(term
@ -56,6 +58,28 @@ function ComboMultipleDropdownList({
setTerm(event.target.value);
};
const onKeyDown = (event) => {
if (event.key === 'Enter') {
if (term && options.map((o) => o[0]).includes(term)) {
event.preventDefault();
return onSelect(term);
}
if (
acceptNewValues &&
term &&
matchSorter(
options.map((o) => o[0]),
term
).length == 0 // ignore when was pressed for selecting popover option
) {
event.preventDefault();
setNewValues([...newValues, term]);
saveSelection([...selections, term]);
setTerm('');
}
}
};
const saveSelection = (selections) => {
setSelections(selections);
if (hiddenField) {
@ -72,7 +96,11 @@ function ComboMultipleDropdownList({
const onRemove = (value) => {
saveSelection(
selections.filter((s) => s !== options.find((o) => o[0] == value)[1])
selections.filter((s) =>
newValues.includes(value)
? s != value
: s !== options.find((o) => o[0] == value)[1]
)
);
inputRef.current.focus();
};
@ -88,7 +116,10 @@ function ComboMultipleDropdownList({
{selections.map((selection) => (
<ComboboxToken
key={selection}
value={options.find((o) => o[1] == selection)[0]}
value={
newValues.find((newValue) => newValue == selection) ||
options.find((o) => o[1] == selection)[0]
}
/>
))}
</ul>
@ -96,6 +127,7 @@ function ComboMultipleDropdownList({
ref={inputRef}
value={term}
onChange={handleChange}
onKeyDown={onKeyDown}
autocomplete={false}
/>
</ComboboxTokenLabel>
@ -211,7 +243,8 @@ ComboMultipleDropdownList.propTypes = {
hiddenFieldId: PropTypes.string,
selected: PropTypes.arrayOf(PropTypes.string),
arraySelected: PropTypes.arrayOf(PropTypes.array),
label: PropTypes.string
label: PropTypes.string,
acceptNewValues: PropTypes.bool
};
export default ComboMultipleDropdownList;

View file

@ -27,7 +27,11 @@
%p.notice Entrez les adresses email des instructeurs que vous souhaitez affecter à cette démarche
- hidden_field_id = SecureRandom.uuid
= hidden_field_tag :emails, nil, data: { uuid: hidden_field_id }
= react_component("ComboMultipleDropdownList", options: @available_instructeur_emails, selected: [], disabled: [], hiddenFieldId: hidden_field_id, label: 'email instructeur')
= react_component("ComboMultipleDropdownList",
options: @available_instructeur_emails, selected: [], disabled: [],
hiddenFieldId: hidden_field_id,
label: 'email instructeur',
acceptNewValues: true)
= f.submit 'Affecter', class: 'button primary send'

View file

@ -30,9 +30,7 @@ feature 'The routing', js: true do
expect(page).to have_field('Nom du groupe', with: 'littéraire')
# add victor to littéraire groupe
# find('input.select2-search__field').send_keys('victor@inst.com', :enter)
find("input[aria-label='email instructeur'").send_keys('victor@inst.com', :enter)
click_on 'Affecter'
perform_enqueued_jobs { click_on 'Affecter' }
expect(page).to have_text("Les instructeurs ont bien été affectés à la démarche")