Skip to content
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.

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

Rethinking how ComboBox handles values. #25

Closed
Tropix126 opened this issue Feb 2, 2022 · 3 comments
Closed

Rethinking how ComboBox handles values. #25

Tropix126 opened this issue Feb 2, 2022 · 3 comments

Comments

@Tropix126
Copy link
Owner

Currently, our ComboBox component usage looks something like this:

<ComboBox value="item" items={[
    { name: "Item" }
]} />

"Selection" occurs when the name of the item matches the value passed in (or the value set by the developer). This has some advantages and disadvantages. The main advantage is that matching based on name means that we can bind the value of the input in searchable mode and use the same input for matching selection. This has some drawbacks, though. Items cannot be assigned a separate value from their name. Names must be unique for the ComboBox to behave as expected, and it can overall be a mess using a readable case system. This will need a bit of thinking on my part on how we should handle this. This would techncially be a breaking change under semver, but I consider undocumented components as in the 0.x stage.

@alkanna
Copy link

alkanna commented Feb 5, 2022

As far as I can see, other libraries went with a selectedId approach, making what we can put in items a lot more flexible. Do you think we could have something similar to what Carbon Components does ?
They seem to dynamically create only one input element on selection, which works natively with forms. It looks like it has all the perks and none of the cons to me.
See here : https://carbon-components-svelte.onrender.com/components/ComboBox

@Tropix126
Copy link
Owner Author

Tropix126 commented Mar 6, 2022

So I think i've thought of an approach that i'm happy with. Essentially what will happen is that "value" (the currently selected item) and the "search value" (the contents of the editable combobox's search input) will be separate.

  • There will be two input elements on editable ComboBoxs. One input will be hidden and be bound to value while the other will be the one for user input that is bound to searchValue.
  • value will select an item if it matches an item's value property.
  • If searchValue matches an item's value property, then a selection will be made and value will be updated.
  • searchValue cannot make a selection of the corresponding item is disabled.
  • If both value and searchValue properties are provided to the ComboBox, then the value will take priority.

@Tropix126
Copy link
Owner Author

Tropix126 commented Mar 6, 2022

implemented as of 537b1cd (1.4.1). technically a breaking change, but this is an undocumented component

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants