DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

feat(combobox): improve style and menu trigger mode

Browse source
This commit is contained in:
Paul Chavard 2024-07-23 18:06:32 +02:00
parent 634d78e369
commit 65dffd0e19
No known key found for this signature in database
1 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/javascript/components/ComboBox.tsx
View file

@ -48,7 +48,6 @@ export function ComboBox({
<AriaComboBox <AriaComboBox
{...props} {...props}
className={`fr-ds-combobox ${className ?? ''}`} className={`fr-ds-combobox ${className ?? ''}`}
menuTrigger="focus"
shouldFocusWrap={true} shouldFocusWrap={true}
> >
{label ? <Label className="fr-label">{label}</Label> : null} {label ? <Label className="fr-label">{label}</Label> : null}
@ -114,7 +113,12 @@ export function SingleComboBox({
return ( return (
<> <>
<ComboBox aria-labelledby={labelledby} {...comboBoxProps} {...props}> <ComboBox
aria-labelledby={labelledby}
menuTrigger="focus"
{...comboBoxProps}
{...props}
>
{(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>} {(item) => <ComboBoxItem id={item.value}>{item.label}</ComboBoxItem>}
</ComboBox> </ComboBox>
{children || name ? ( {children || name ? (
@ -184,7 +188,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
key={item.value} key={item.value}
id={item.value} id={item.value}
textValue={`Retirer ${item.label}`} textValue={`Retirer ${item.label}`}
className="fr-tag fr-tag--sm" className="fr-tag fr-tag--sm fr-tag--dismiss"
> >
{item.label} {item.label}
<Button slot="remove" className="fr-tag--dismiss"></Button> <Button slot="remove" className="fr-tag--dismiss"></Button>
@ -197,6 +201,7 @@ export function MultiComboBox(maybeProps: MultiComboBoxProps) {
aria-labelledby={labelledby} aria-labelledby={labelledby}
allowsCustomValue={allowsCustomValue} allowsCustomValue={allowsCustomValue}
inputRef={inputRef} inputRef={inputRef}
menuTrigger="focus"
{...comboBoxProps} {...comboBoxProps}
{...props} {...props}
> >