Skip to content

Commit

Permalink
Choices/ChoicesOffline: add keyboard support (#647)
Browse files Browse the repository at this point in the history 
* Choice server add keyboard support

* Choice server add keyboard support

* merge to latest version

* use down key to trigger dropdown

* add keyboard support to choice offline

* bug fix error : filter backslashes on keyword

* WIP

---------

Co-authored-by: Robson Tenório <rrtenorio@gmail.com>
  • Loading branch information
@akhmads @robsontenorio
akhmads and robsontenorio authored Oct 16, 2024
1 parent 5302060 commit fe33310
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 11 deletions.
29 changes: 22 additions & 7 deletions src/View/Components/Choices.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ public function render(): View|Closure|string
isDisabled: {{ json_encode($isDisabled()) }},
isRequired: {{ json_encode($isRequired()) }},
minChars: {{ $minChars }},
init() {
// Fix weird issue when navigating back
document.addEventListener('livewire:navigating', () => {
Expand Down Expand Up @@ -159,7 +159,7 @@ public function render(): View|Closure|string
? this.selection == id
: this.selection.includes(id)
},
toggle(id) {
toggle(id, keepOpen = false) {
if (this.isReadonly || this.isDisabled) {
return
}
Expand All @@ -176,13 +176,22 @@ public function render(): View|Closure|string
this.dispatchChangeEvent({ value: this.selection })
this.$refs.searchInput.value = ''
this.$refs.searchInput.focus()
if (!keepOpen) {
this.$refs.searchInput.focus()
}
},
search(value) {
search(value, event) {
if (value.length < this.minChars) {
return
}
// Prevent search for this keys
if (event && ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Shift', 'CapsLock', 'Tab'].includes(event.key)) {
return;
}
// Call search function from parent component
// `search(value)` or `search(value, extra1, extra2 ...)`
@this.{{ str_contains($searchFunction, '(')
Expand All @@ -194,6 +203,9 @@ public function render(): View|Closure|string
this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail }))
}
}"
@keydown.up="$focus.previous()"
@keydown.down="$focus.next()"
>
<!-- STANDARD LABEL -->
@if($label)
Expand Down Expand Up @@ -274,13 +286,14 @@ public function render(): View|Closure|string
<input
x-ref="searchInput"
@input="focus()"
@keydown.arrow-down.prevent="focus()"
:required="isRequired && isSelectionEmpty"
:readonly="isReadonly || isDisabled || ! isSearchable"
:class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'"
class="outline-none mt-0.5 bg-transparent w-20"
@if($searchable)
@keydown.debounce.{{ $debounce }}="search($el.value)"
@keydown.debounce.{{ $debounce }}="search($el.value, $event)"
@endif
/>
Expand Down Expand Up @@ -334,9 +347,11 @@ class="p-3 decoration-wavy decoration-warning underline font-bold border border-
@foreach($options as $option)
<div
wire:key="option-{{ data_get($option, $optionValue) }}"
@click="toggle({{ $getOptionValue($option) }})"
@click="toggle({{ $getOptionValue($option) }}, true)"
@keydown.enter="toggle({{ $getOptionValue($option) }}, true)"
:class="isActive({{ $getOptionValue($option) }}) && 'border-s-4 border-s-primary'"
class="border-s-4"
class="border-s-4 focus:bg-base-200 focus:outline-none"
tabindex="0"
>
<!-- ITEM SLOT -->
@if($item)
Expand Down
17 changes: 13 additions & 4 deletions src/View/Components/ChoicesOffline.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,7 +151,7 @@ public function render(): View|Closure|string
? this.selection == id
: this.selection.includes(id)
},
toggle(id) {
toggle(id, keepOpen = false) {
if (this.isReadonly || this.isDisabled) {
return
}
Expand All @@ -167,7 +167,10 @@ public function render(): View|Closure|string
}
this.dispatchChangeEvent({ value: this.selection })
this.$refs.searchInput.focus()
if (!keepOpen) {
this.$refs.searchInput.focus()
}
},
lookup() {
Array.from(this.$refs.choicesOptions.children).forEach(child => {
Expand All @@ -185,6 +188,9 @@ public function render(): View|Closure|string
this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail }))
}
}"
@keydown.up="$focus.previous()"
@keydown.down="$focus.next()"
>
<!-- STANDARD LABEL -->
@if($label)
Expand Down Expand Up @@ -268,6 +274,7 @@ public function render(): View|Closure|string
x-model="search"
@keyup="lookup()"
@input="focus()"
@keydown.arrow-down.prevent="focus()"
:required="isRequired && isSelectionEmpty"
:readonly="isReadonly || isDisabled || ! isSearchable"
:class="(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'"
Expand Down Expand Up @@ -324,10 +331,12 @@ class="p-3 decoration-wavy decoration-warning underline font-bold border border-
<div
id="option-{{ $uuid }}-{{ data_get($option, $optionValue) }}"
wire:key="option-{{ data_get($option, $optionValue) }}"
@click="toggle({{ $getOptionValue($option) }})"
@click="toggle({{ $getOptionValue($option) }}, true)"
@keydown.enter="toggle({{ $getOptionValue($option) }}, true)"
:class="isActive({{ $getOptionValue($option) }}) && 'border-s-4 border-s-primary'"
search-value="{{ data_get($option, $optionLabel) }}"
class="border-s-4"
class="border-s-4 focus:bg-base-200 focus:outline-none"
tabindex="0"
>
<!-- ITEM SLOT -->
@if($item)
Expand Down

0 comments on commit fe33310

Please sign in to comment.