Skip to content

feat(combobox): add support for multiselect and readonly modes #1310

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
meriouma merged 3 commits into from
Dec 23, 2025
Merged

feat(combobox): add support for multiselect and readonly modes #1310

meriouma merged 3 commits into from
Dec 23, 2025

Conversation

@ogermain-kronos
Copy link
Contributor

@ogermain-kronos ogermain-kronos commented Nov 24, 2025 •
edited
Loading

https://equisoft.atlassian.net/browse/DS-1386

Cette PR vient ajouter le support des modes multiselect et readonly dans la composante combox. Ça inclut le support de l'ajout de valeurs custom en mode multiselect.

multiselect
https://github.com/user-attachments/assets/067b0477-8d6d-44b1-af25-9fb9a2b68641

allowCustomValues
https://github.com/user-attachments/assets/be5f5663-df5a-4f53-b768-9b8d87db9390

Les valeurs viennent se placer dans un input caché à part (comme pour le DropdownList):
image
<input type="hidden" data-testid="input" value="ski|bi|di|quebec">

readonly
image

disabled
image

Un effort a aussi été fait pour isoler certaines fonctions également utilisées dans la composante dropdown-list.

@ogermain-kronos ogermain-kronos requested a review from a team as a code owner November 24, 2025 22:13
@github-actions
Copy link

github-actions bot commented Nov 24, 2025

Storybook for this build: https://ds.equisoft.io/pr-1310/

@github-actions
Copy link

github-actions bot commented Nov 24, 2025

Webapp for this build: https://ds.equisoft.io/pr-1310/webapp/

ogermain-kronos
ogermain-kronos commented Nov 24, 2025
View reviewed changes
packages/react/src/components/combobox/combobox.tsx
) : (
<Textbox {...sharedInputProps} ref={refs.setReference} />
)}
{inputValue !== '' && !disabled && !multiselect && (
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'ai décidé de ne pas afficher la bouton de clear en mode multiselect, pour pas risquer qu'un user le clique par erreur (en se mêlant avec le bouton remove d'un tag à proximité, par exemple).

packages/react/src/components/combobox/combobox.tsx
/>
{inputValue !== '' && !disabled && (
{multiselect ? (
<TagInputContainer
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En mode multiselect, on remplace l'input Textbox par un div TagInputContainer ayant un input MultiSelectInput comme enfant.

Ça permet de donner l'illusion d'avoir un seul élément HTML pouvant accommoder à la fois les tags et les entrées écrites du user, et pouvant se redimensionner verticalement lorsque la largeur de l'ensemble des options sélectionnées (tags) dépassent la largeur du div.

packages/react/src/components/combobox/combobox.tsx Outdated
<MultiSelectInput
{...sharedInputProps}
$hasTags={selectedOptions.length > 0}
ref={multiSelectInputRef}
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Les refs et le focus sont sur le div par défaut, et on switch le focus vers l'input même lors de certains events (e.g. le onBlur, etc.) question de ne pas changer le comportement aux yeux du user à comparé au mode non-multiselect.

packages/react/src/components/combobox/combobox.tsx
options,
placeholder,
name,
readOnly,
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On avait besoin d'un mode readOnly dans le CRM vu qu'on switch le DropdownList avec le Combobox, donc je l'ai ajouté par la bande.

packages/react/src/components/combobox/combobox.tsx Outdated

export const Combobox: FC<ComboboxProps> = ({
allowCustomValue = false,
autoSelectMatchingOption = true,
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

En mode multiselect, c'est pas tous les cas d'utilisation qui requiert qu'on sélectionne automatiquement la première option qui match ce que le user écrit.

Dans le cas des document tags dans le CRM, par exemple, les utilisateurs pourraient avoir des tags du genre:

Québec
Québec - Capitale Nationale
Québec - Montérégie
Québec - Estrie
etc.

et on veut éviter que la composante sélectionne "Québec" alors que le user aurait plutôt voulu "Québec - Montérégie" par exemple.

J'ai donc ajouté une prop pour gérer cette fonctionnalité là, mais je la supporte quand même en multiselect des fois que ça serait utile à quelqu'un.

packages/react/src/components/combobox/combobox.tsx
inlineAutoComplete = false,
isLoading = false,
label,
multiselect,
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Le birthday boy.

packages/react/src/components/combobox/combobox.tsx
isOptionEnabled,
isOptionSelected, optionsAreEqual,
removeOption,
} from '../listbox/utils';
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'ai mis certaines fonctions qui semblaient apparaître en double chez le voisin (DropdownList) dans une classe utilitaire pour enlever un peu de gras.

packages/react/src/components/combobox/combobox.tsx

function getBackgroundColor({ disabled, $readOnly, theme }: TextboxProps | TagInputContainerProps): string {
if ($readOnly) {
return theme.component['combobox-readonly-background-color'];
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

J'ai ajouté des tokens de couleur pour le readOnly (mêmes valeurs que pour le DropdownList).

packages/react/src/components/combobox/combobox.tsx Outdated
setInputValue('');
clearSelectedOptions();

if (isValueType(value)) {
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Support des valeurs custom au render initial ici.

packages/react/src/components/combobox/combobox.tsx
closeListbox();
}
} else if (multiselect && allowCustomValue && inputValue.trim() !== '') {
const customOption = createCustomOption(inputValue, inputValue) as ComboboxOption;
Copy link
Contributor Author

@ogermain-kronos ogermain-kronos Nov 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Support des valeurs custom via l'écriture dans l'input ici.

@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from 88cca87 to bc35bdd Compare December 10, 2025 22:48
@meriouma
Copy link
Contributor

meriouma commented Dec 10, 2025

J'ai rebased pour régler le conflit. J'avais fait une modif aux utils que t'as déplacé.

@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from bc35bdd to b8fd27d Compare December 22, 2025 19:03
meriouma
meriouma reviewed Dec 22, 2025
View reviewed changes
packages/react/src/components/combobox/combobox.tsx
}
}
break;
case 'Enter':
Copy link
Contributor

@meriouma meriouma Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

La doc dit pour le multiselect que ça devrait être une virgule, mais en y pensant je pense que le Enter est mieux. C'est pas exclu qu'on ait une valeur avec une virgule dedans.
Est-ce que c'est toi @LarryMatte qui avait documenté ça? T'en penses quoi?

@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from b8fd27d to da8e272 Compare December 22, 2025 19:12
@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch 2 times, most recently from 208325f to 0c4c61c Compare December 22, 2025 19:28
@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from 0c4c61c to ed31144 Compare December 22, 2025 19:37
@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from 7d8a6b6 to d535066 Compare December 23, 2025 16:42
@meriouma meriouma force-pushed the dev/DS-1386-combobox-ms branch from d535066 to 42996cb Compare December 23, 2025 21:10
@meriouma meriouma merged commit 8183c7f into master Dec 23, 2025
22 of 23 checks passed
@meriouma meriouma deleted the dev/DS-1386-combobox-ms branch December 23, 2025 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@meriouma meriouma meriouma left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@ogermain-kronos @meriouma