diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 031f96c37..596c1e2dd 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -535,6 +535,13 @@ padding: $default-spacer; } +[data-reach-combobox-no-results] { + font-size: 16px; + color: $dark-grey; + background: $light-grey; + padding: $default-spacer; +} + [data-reach-combobox-token] button { cursor: pointer; background-color: transparent; diff --git a/app/javascript/components/ComboMultiple.jsx b/app/javascript/components/ComboMultiple.jsx index 9b7d961ed..04ec02875 100644 --- a/app/javascript/components/ComboMultiple.jsx +++ b/app/javascript/components/ComboMultiple.jsx @@ -116,6 +116,7 @@ function ComboMultiple({ } setTerm(''); awaitFormSubmit.done(); + hidePopover(); }; const onRemove = (label) => { @@ -148,6 +149,18 @@ function ComboMultiple({ } }; + const hidePopover = () => { + document + .querySelector(`[data-reach-combobox-popover-id="${inputId}"]`) + ?.setAttribute('hidden', 'true'); + }; + + const showPopover = () => { + document + .querySelector(`[data-reach-combobox-popover-id="${inputId}"]`) + ?.removeAttribute('hidden'); + }; + const onBlur = () => { if ( term && @@ -156,6 +169,10 @@ function ComboMultiple({ awaitFormSubmit(() => { onSelect(term); }); + } else { + setTimeout(() => { + hidePopover(); + }, 200); } }; @@ -185,6 +202,7 @@ function ComboMultiple({ onChange={handleChange} onKeyDown={onKeyDown} onBlur={onBlur} + onClick={showPopover} autocomplete={false} id={inputId} aria-label={label} @@ -195,14 +213,25 @@ function ComboMultiple({ /> {results && (results.length > 0 || !acceptNewValues) && ( - - {results.length === 0 && ( -

- Aucun résultat{' '} - -

- )} + + {results.length === 0 && ( +
  • + Aucun résultat{' '} + +
  • + )} {results.map(([label, value], index) => { if (label.startsWith('--')) { return ;