Skip to content

Commit

Permalink
Adds missing documentation regarding the combobox's selection mode
Browse files Browse the repository at this point in the history
  • Loading branch information
haukesomm committed Sep 12, 2024
1 parent 389f104 commit cd1d46a
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -318,10 +318,11 @@ class Combobox<E : HTMLElement, T>(tag: Tag<E>, id: String?) : Tag<E> by tag, Op
* match in the combobox's input or not.
*
* The following strategies can be configured:
* - [autoSelectMatch()][SelectionStrategyProperty.autoSelectMatch] (__default__): Automatically select elements if
* - [autoSelectMatch()][SelectionStrategyProperty.autoSelectMatch]: Automatically select elements if
* they are an exact match
* - [manual()][SelectionStrategyProperty.manual]: Render exact matches as part of the regular dropdown for the user
* to manually select. If no selection is made, the input is reset to the last selected value.
* - [manual()][SelectionStrategyProperty.manual] (__default__): Render exact matches as part of the regular
* dropdown for the user to manually select. If no selection is made, the input is reset to the last selected
* value.
*
* Example:
* ```kotlin
Expand Down
21 changes: 21 additions & 0 deletions www/src/pages/headless/combobox.md
Original file line number Diff line number Diff line change
Expand Up @@ -217,6 +217,27 @@ combobox {
}
```

## Auto-Selecting Items

By default, the user needs to manually select an item for it to be accepted as the combo box's value.
It can, however, also be configured to automatically select matching items for a query via the `selectionStrategy`
property.

The following modes are offered:

| Configuration method | Description |
|-----------------------|---------------------------------------------|
| `autoSelectMatches()` | Matching items are automatically selected |
| `manual()` | Matching items need to be selected manually |

```kotlin
combobox {
selectionStrategy.autoSelectMatches()
// OR
selectionStrategy.manual()
}
```

## Transitions

Showing and hiding the selection list can be easily animated with the help of `transition`:
Expand Down

0 comments on commit cd1d46a

Please sign in to comment.