Issue
Even after passing label attribute its showing both label and value in dropdown also, after selecting option from dropdown its showing value in input box insteed of label
<input
on:change={onChangeSuggestion}
on:input={updateValue}
list="inventoryLocations"
id="store-locator-mapbox-input"
placeholder="Search store or address..."
type="text"
/>
<datalist id="inventoryLocations">
{#each suggestions as location}
<option value={[location.geometry.coordinates[0], location.geometry.coordinates[1]]} label={location.place_name} />
{/each}
</datalist>
Solution
How datalist
options are presented depends on the browser, e.g. Firefox will not show the value
in the list. The only constant is that the value
will be what will end up in the input
because inputs of type text
have no hidden value (unlike select
).
If you need more control over the appearance, the only real option is using a custom component that renders its own input/dropdown without relying on datalist
. There are libraries which provide this functionality with varying features and accessibility.
Answered By - H.B.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.