Add suggestions= parameter for native datalist autocomplete - #56
Open
blackary wants to merge 4 commits into
Open
Add suggestions= parameter for native datalist autocomplete#56blackary wants to merge 4 commits into
blackary wants to merge 4 commits into
Conversation
When suggestions=['apple', 'banana', ...] is passed, the component renders a <datalist> and links it to the input, providing native browser autocomplete suggestions while the user types. No selection is forced — the user can type anything; the list is purely a hint. The datalist is rebuilt only when the suggestion list changes. When suggestions=None (default) the datalist is detached so there is no overhead. Closes #12.
The browser re-shows the <datalist> dropdown after a selection is confirmed whenever the input has focus and a list attribute is present. Fix: only attach the list attribute while _userTyping is true (the user is actively typing before Python has acknowledged the value). Once the round-trip completes and _userTyping is cleared, the list attribute is removed so the dropdown cannot re-appear. It is re-attached on the next input event.
Previous fix removed the list attribute based on _userTyping, which caused suggestions to flicker on every normal keystroke (the round-trip clears _userTyping in ~50-200ms, well within typing speed). New approach: detect datalist selection specifically. On every input event, check whether the new value exactly matches a known option (input._selectedFromList). If so, onRender suppresses the list attribute so the dropdown cannot re-appear after the selection is confirmed. The list attribute is re-attached on the very next input event, so typing after a selection immediately shows suggestions again. Normal typing (partial matches) sets _selectedFromList=false, so the list stays attached through the round-trip — no flicker.
The previous fix removed the list attribute in onRender (post-round-trip), but the input handler was unconditionally re-attaching it first, giving the browser a window to show the dropdown before onRender could suppress it. Now the input handler sets list='' immediately when a selection is detected, so the dropdown is suppressed before the browser can re-show it.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
Closes #12.
Adds an optional
suggestionsparameter that accepts a list of strings. When set, the browser's native autocomplete dropdown appears as the user types:<datalist>element — no JS library dependenciessuggestions=None(default) detaches the datalist entirely, so there is no overhead for existing usersChange
A
<datalist>in the HTML skeleton, linked to the input vialist=.onRenderrebuilds the<option>list only when the suggestions actually change (avoids dropdown flicker on every rerun) and detaches thelistattribute when the list is empty. Option values are HTML-escaped.Tests
Added test 17 asserting the datalist is populated with the provided option values. 19 tests, 19 passing.