accepte nouvelles valeurs pour ComboMultipleDropdownList
This commit is contained in:
parent
06e282b839
commit
8b55f67964
3 changed files with 42 additions and 7 deletions
|
@ -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;
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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")
|
||||
|
||||
|
|
Loading…
Reference in a new issue