Handle tab in autoselect #354
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@tmepple It's good! Thanks! |
|
Thanks for the extremely fast review @jtommy! |
kikuomax
added a commit
to kikuomax/buefy
that referenced
this pull request
Jan 8, 2025
* feat(lib): rewrite Taginput in TS
Rewrites `Taginput.vue` in TypeScript:
- Statically names imported Buefy components so that type checking
works:
- `[Autocomplete.name]: Autocomplete` → `BAutocomplete`
- `[Tag.name]: Tag` → `BTag`
- Introduces pseudo type parameters `T` and `U`, which are `any`:
- `T`: type of a tag
- `U`: type of inputs given to `beforeAdding` and `createTag`, and the
item type of `data` given to `b-autocomplete`. `addTag` accepts `U`
but some code in `addTag` assumes the input is a string, so it won't
work if it is strictly typed.
The following seemingly trivial changes might be breaking:
- Changes the type of `maxtags`: `[Number, String]` → `Number`. Because
there is no reason to accept `String`. A breaking change anyway.
- Removes `rounded` prop because it is equivalent to the one defined in
`FormElementMixin`. Should not be a breaking change.
- Removes the argument given to `focus` which is defined in
`FormElementMixin`. Should not be a breaking change.
- `onTyping` adds a condition to tell `number` or `string` because
`number` has no `trim`. Handlers of `typing` events can no longer
assume the payloads are strings.
A remarkable breaking change:
- Removes `autocomplete` prop because it conflicts with the one defined
in `FormElementMixin`; `Boolean` in the former and `String` in the
latter. This discrepancy caused wierd type errors that seemingly
unrelated props and methods became `never`.
Unfortunately, the meanings of `autocomplete` are different between
`Taginput` and `FormElementMixin`. I think we have two options:
- Rename `autocomplete` of `Taginput`; it was `select-only` in the
past
- Remove `autocomplete` from `FormElementMixin`
For now, `autocomplete` is removed from `Taginput` and inherited from
`FormElementMixin`. Since `autocomplete` is supposed to be given
without value, an empty string also turns on the autocomplete feature.
The following change is trivial but I want to mention the reason for it:
- Removes double asterisks from comments to prevent `api-extractor` from
picking them up for document generation
* test(lib): rewrite spec for Taginput in TS
- Rewrites `components/taginput/Taginput.spec.js` in TypeScript:
- Replaces the extension: `.js` → `.ts`
- Imports necessary methods from `vitest`
- Appends `.vue` extensions to import paths of Buefy components
Replaces `autocomplete`: `true` → an empty string (`''`). Because the
type of `autocomplete` prop was changed: `boolean` → `string`. An
empty string represents an attribute given without value, which is
the most likely use case of `autocomplete`.
- Replaces `Taginput.spec.js.snap` with `Taginput.spec.ts.snap`.
* chore(lib): bundle Taginput as TS
`rollup.config.mjs` removes `taginput` from `JS_COMPONENTS`.
* feat(docs): rewrite Taginput examples in TS
Rewrites the examples of `Taginput` in `pages/components/taginput` in
TypeScript.
Adds missing types. The following changes might not be trivial:
- `getFilteredTags` method in examples `ExAutocomplete`, `ExSelected`,
and `ExTemplatedAutocomplete` deals with the situation where the input
is `number` or `undefined`
Corrects type errors.
- `maxtags` prop no longer accepts `string`
- `autocomplete` prop is not `boolean` but `string`. Explicitly binds
`"on"` to it
Here is a TypeScript migration tip:
- Explicitly import and register components so that they are type
checked. No type-checking is performed for globally registered
components.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Previously, pressing
tabon an autocomplete field would move to the next tabbable element on the page but leave the dropdown open. This PR closes the dropdown while permitting nativetabhandling to move to the next element.Additionally, if there is a hovered option it will select it (the same as pressing
enter) and move to the next element. This provides for even faster data entry especially when used in conjunction with thekeep-firstoption.