Svelte select is now 100% keyboard useable (or at least in one modal it is....)
ref #92
This commit is contained in:
parent
4e51b128e6
commit
eb6af4b4f0
|
@ -14,15 +14,14 @@
|
||||||
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
option.firstname + " " + (option.middlename || "") + " " + option.lastname;
|
||||||
const filterRunners = (label, filterText, option) =>
|
const filterRunners = (label, filterText, option) =>
|
||||||
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
label.toLowerCase().includes(filterText.toLowerCase()) ||
|
||||||
option.id.toString().startsWith(filterText.toLowerCase());
|
option.value.toString().startsWith(filterText.toLowerCase());
|
||||||
function focus(el) {
|
function focus(el) {
|
||||||
el.focus();
|
el.focus();
|
||||||
}
|
}
|
||||||
$: runner = 0;
|
$: runner = 0;
|
||||||
$: runners = [];
|
$: runners = ['One', 'Two', 'Three'];
|
||||||
$: is_fixed = false;
|
|
||||||
RunnerService.runnerControllerGetAll().then((val) => {
|
RunnerService.runnerControllerGetAll().then((val) => {
|
||||||
runners = val;
|
runners = val.map(r => {return {label: getRunnerLabel(r), value: r}});
|
||||||
});
|
});
|
||||||
$: distance_input = 0;
|
$: distance_input = 0;
|
||||||
$: processed_last_submit = true;
|
$: processed_last_submit = true;
|
||||||
|
@ -133,14 +132,12 @@
|
||||||
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
class="block text-sm font-medium text-gray-700">{$_('runner')}</label>
|
||||||
<Select
|
<Select
|
||||||
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
containerClasses="rounded-l-md mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
||||||
getSelectionLabel={(option) => getRunnerLabel(option)}
|
|
||||||
getOptionLabel={(option) => getRunnerLabel(option)}
|
|
||||||
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
itemFilter={(label, filterText, option) => filterRunners(label, filterText, option)}
|
||||||
items={runners}
|
items={runners}
|
||||||
showChevron={true}
|
showChevron={true}
|
||||||
placeholder={$_('search-for-runner-by-name-or-id')}
|
placeholder={$_('search-for-runner-by-name-or-id')}
|
||||||
noOptionsMessage={$_('no-runners-found')}
|
noOptionsMessage={$_('no-runners-found')}
|
||||||
on:select={(selectedValue) => (runner = selectedValue.detail.id)}
|
on:select={(selectedValue) => (runner = selectedValue.detail.value.id)}
|
||||||
on:clear={() => (runner = null)} />
|
on:clear={() => (runner = null)} />
|
||||||
</div>
|
</div>
|
||||||
<div class="col-span-6">
|
<div class="col-span-6">
|
||||||
|
|
Loading…
Reference in New Issue
Block a user