@mhmo91/schmancy 0.10.37 → 0.10.38

package/src/form/fields/autocomplete/autocomplete.ts

@@ -60,18 +60,18 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
     /** Override mixin's resetForm with autocomplete-specific subject reset. */
     override resetForm(): void {
         if (this.multi) {
-            this._selectedValues$.next([])
+            this.selectedValues$.next([])
         } else {
-            this._selectedValue$.next('')
+            this.selectedValue$.next('')
         }
-        this._inputValue = ''
-        this._inputValue$.next('')
+        this.inputValue = ''
+        this.inputValue$.next('')
         super.resetForm()
     }
 
     // Track whether value/values have been explicitly set
-     _valueSet: boolean = false
-     _valuesSet: boolean = false
+     valueSet: boolean = false
+     valuesSet: boolean = false
 
     // Autocomplete-specific properties only — `name`, `label`, `required`,
     // `error`, `validationMessage` come from the mixin.
@@ -84,76 +84,76 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
     @property({ type: Number }) debounceMs = 200
     @property({ type: Number }) similarityThreshold = 0.3 // Minimum similarity score to show option
 
-    private readonly _a11yId = `schmancy-autocomplete-${Math.random().toString(36).slice(2, 10)}`
+    private readonly a11yId = `schmancy-autocomplete-${Math.random().toString(36).slice(2, 10)}`
 
     // Values property for multi-select mode
     @property({ type: Array })
     get values() {
-        return [...this._selectedValues$.value]
+        return [...this.selectedValues$.value]
     }
     set values(vals: string[]) {
-        this._valuesSet = true
-        this._selectedValues$.next(Array.isArray(vals) ? [...vals] : [])
+        this.valuesSet = true
+        this.selectedValues$.next(Array.isArray(vals) ? [...vals] : [])
     }
 
     // Value property — narrowed override of the mixin's wide value union.
     @property({ type: String, reflect: true })
     override get value(): string {
         return this.multi
-            ? this._selectedValues$.value.join(',')
-            : this._selectedValue$.value
+            ? this.selectedValues$.value.join(',')
+            : this.selectedValue$.value
     }
     override set value(val: string) {
-        this._valueSet = true
+        this.valueSet = true
         if (this.multi) {
             const newValues = val ? val.split(',').map(v => v.trim()).filter(Boolean) : []
-            const currentValues = this._selectedValues$.value
+            const currentValues = this.selectedValues$.value
             // Only update if values actually changed
             if (JSON.stringify(newValues) !== JSON.stringify(currentValues)) {
-                this._selectedValues$.next(newValues)
+                this.selectedValues$.next(newValues)
             }
         } else {
             // Only update if value actually changed
-            if (val !== this._selectedValue$.value) {
-                this._selectedValue$.next(val)
+            if (val !== this.selectedValue$.value) {
+                this.selectedValue$.next(val)
                 // Update the input display when value is set
-                this._updateInputDisplay()
+                this.updateInputDisplay()
             }
         }
     }
 
     // State
-    @state() private _open = false
-    @state() private _inputValue = ''
-    @state() private _visibleOptionsCount = 0
-    @state() private _hasResults = true
+    @state() private open = false
+    @state() private inputValue = ''
+    @state() private visibleOptionsCount = 0
+    @state() private hasResults = true
 
     // DOM references
-    @query('#options') _listbox!: HTMLUListElement
-    @query('sch-input') _input!: SchmancyInput
-    @queryAssignedElements({ flatten: true }) private _options!: SchmancyOption[]
-    private _inputElementRef = createRef<HTMLInputElement>()
+    @query('#options') listbox!: HTMLUListElement
+    @query('sch-input') input!: SchmancyInput
+    @queryAssignedElements({ flatten: true }) private options!: SchmancyOption[]
+    private inputElementRef = createRef<HTMLInputElement>()
 
     // RxJS Subjects - only what we actually need
-    private _selectedValue$ = new BehaviorSubject<string>('')
-    private _selectedValues$ = new BehaviorSubject<string[]>([])
-    private _inputValue$ = new BehaviorSubject<string>('')
+    private selectedValue$ = new BehaviorSubject<string>('')
+    private selectedValues$ = new BehaviorSubject<string[]>([])
+    private inputValue$ = new BehaviorSubject<string>('')
 
     override connectedCallback() {
         // FIELD_CONNECT_EVENT is dispatched by the mixin's connectedCallback.
         super.connectedCallback()
-        this._setupAutocompleteLogic()
-        this._setupDocumentClickHandler()
+        this.setupAutocompleteLogic()
+        this.setupDocumentClickHandler()
     }
 
-    private _setupAutocompleteLogic() {
+    private setupAutocompleteLogic() {
         // Sync selection state
         combineLatest([
-            this._selectedValue$,
-            this._selectedValues$
+            this.selectedValue$,
+            this.selectedValues$
         ]).pipe(
             tap(([selectedValue, selectedValues]) => {
-                this._updateOptionSelection(selectedValue, selectedValues)
+                this.updateOptionSelection(selectedValue, selectedValues)
                 // Keep ElementInternals form value in sync with selection (single and multi).
                 const formValue = this.multi ? selectedValues.join(',') : selectedValue
                 this.internals?.setFormValue(formValue || null)
@@ -169,20 +169,20 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
         ).subscribe()
 
         // Filter options based on input
-        this._inputValue$.pipe(
+        this.inputValue$.pipe(
             distinctUntilChanged(),
             debounceTime(this.debounceMs),
             tap(searchTerm => {
-                if (this._open) {
-                    this._filterOptions(searchTerm)
+                if (this.open) {
+                    this.filterOptions(searchTerm)
                 }
             }),
             takeUntil(this.disconnecting)
         ).subscribe()
     }
 
-    private _setupOptionHandlers() {
-        this._options.forEach((option, index) => {
+    private setupOptionHandlers() {
+        this.options.forEach((option, index) => {
             option.setAttribute('role', 'option')
             option.tabIndex = -1
             if (!option.id) {
@@ -203,13 +203,13 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                 .pipe(takeUntil(this.disconnecting))
                 .subscribe(e => {
                     e.stopPropagation()
-                    this._selectOption(option)
+                    this.selectOption(option)
                 })
         })
     }
 
-    private _updateOptionSelection(selectedValue: string, selectedValues: string[]) {
-        this._options.forEach(option => {
+    private updateOptionSelection(selectedValue: string, selectedValues: string[]) {
+        this.options.forEach(option => {
             option.selected = this.multi
                 ? selectedValues.includes(option.value)
                 : option.value === selectedValue
@@ -217,20 +217,20 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
         })
     }
 
-    private _filterOptions(searchTerm: string) {
+    private filterOptions(searchTerm: string) {
         const term = searchTerm.trim()
 
         if (!term) {
             // Show all options if no search term
-            this._options.forEach(option => {
+            this.options.forEach(option => {
                 option.hidden = false
                 option.style.order = '0'
             })
-            this._visibleOptionsCount = this._options.length
-            this._hasResults = true
+            this.visibleOptionsCount = this.options.length
+            this.hasResults = true
         } else {
             // Calculate similarity scores for all options
-            const scoredOptions: FilteredOption[] = this._options.map(option => {
+            const scoredOptions: FilteredOption[] = this.options.map(option => {
                 const optionLabel = option.label || option.textContent || ''
                 const optionValue = option.value
 
@@ -258,108 +258,108 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                 }
             })
 
-            this._visibleOptionsCount = visibleCount
-            this._hasResults = visibleCount > 0
+            this.visibleOptionsCount = visibleCount
+            this.hasResults = visibleCount > 0
         }
 
-        this._announceToScreenReader(
-            this._visibleOptionsCount > 0
-                ? `${this._visibleOptionsCount} option${this._visibleOptionsCount === 1 ? '' : 's'} available.`
+        this.announceToScreenReader(
+            this.visibleOptionsCount > 0
+                ? `${this.visibleOptionsCount} option${this.visibleOptionsCount === 1 ? '' : 's'} available.`
                 : 'No results found.'
         )
     }
 
-    private _openDropdown() {
-        this._open = true
+    private openDropdown() {
+        this.open = true
         // Reset filters based on current input value when dropdown opens
-        this._filterOptions(this._inputValue)
+        this.filterOptions(this.inputValue)
     }
 
-    private _selectOption(option: SchmancyOption) {
+    private selectOption(option: SchmancyOption) {
         if (this.multi) {
-            const currentValues = this._selectedValues$.value
+            const currentValues = this.selectedValues$.value
             const index = currentValues.indexOf(option.value)
             const newValues = index > -1
                 ? currentValues.filter(v => v !== option.value)
                 : [...currentValues, option.value]
 
-            this._selectedValues$.next(newValues)
-            this._announceToScreenReader(
+            this.selectedValues$.next(newValues)
+            this.announceToScreenReader(
                 newValues.length > 0
-                    ? `Selected: ${this._getSelectedLabels().join(', ')}`
+                    ? `Selected: ${this.getSelectedLabels().join(', ')}`
                     : 'No options selected'
             )
-            this._fireChangeEvent()
+            this.fireChangeEvent()
         } else {
             // Update value first
-            this._selectedValue$.next(option.value)
+            this.selectedValue$.next(option.value)
 
             // Close dropdown IMMEDIATELY to prevent blur handler from firing
-            this._open = false
+            this.open = false
 
             // Now fire event with the NEW value
-            this._fireChangeEvent()
+            this.fireChangeEvent()
 
             // Update UI
-            this._inputValue = option.label || option.textContent || ''
-            this._inputValue$.next(this._inputValue)
+            this.inputValue = option.label || option.textContent || ''
+            this.inputValue$.next(this.inputValue)
 
-            this._announceToScreenReader(`Selected: ${option.label || option.textContent}`)
+            this.announceToScreenReader(`Selected: ${option.label || option.textContent}`)
         }
     }
 
-    private _setupDocumentClickHandler() {
+    private setupDocumentClickHandler() {
         fromEvent<MouseEvent>(document, 'click')
             .pipe(takeUntil(this.disconnecting))
             .subscribe(e => {
-                if (!this._open) return
+                if (!this.open) return
                 const path = e.composedPath()
-                if (!path.includes(this) && !this._options.some(opt => path.includes(opt))) {
-                    this._open = false
-                    this._updateInputDisplay()
+                if (!path.includes(this) && !this.options.some(opt => path.includes(opt))) {
+                    this.open = false
+                    this.updateInputDisplay()
                 }
             })
     }
 
 
-    private _updateInputDisplay() {
+    private updateInputDisplay() {
         // For multi-select, we don't update input display since chips show the selections
         if (this.multi) return
 
-        const selectedValue = this._selectedValue$.value
-        const option = this._options.find(opt => opt.value === selectedValue)
-        this._inputValue = option ? option.label || option.textContent || '' : ''
-        this._inputValue$.next(this._inputValue)
+        const selectedValue = this.selectedValue$.value
+        const option = this.options.find(opt => opt.value === selectedValue)
+        this.inputValue = option ? option.label || option.textContent || '' : ''
+        this.inputValue$.next(this.inputValue)
 
-        if (this._inputElementRef.value) {
-            this._inputElementRef.value.value = this._inputValue
+        if (this.inputElementRef.value) {
+            this.inputElementRef.value.value = this.inputValue
         }
     }
 
-    private _getSelectedLabels(): string[] {
-        return this._options
+    private getSelectedLabels(): string[] {
+        return this.options
             .filter(option => 
                 this.multi 
-                    ? this._selectedValues$.value.includes(option.value)
-                    : option.value === this._selectedValue$.value
+                    ? this.selectedValues$.value.includes(option.value)
+                    : option.value === this.selectedValue$.value
             )
             .map(option => option.label || option.textContent || '')
     }
 
-    private _announceToScreenReader(message: string) {
+    private announceToScreenReader(message: string) {
         const liveRegion = this.shadowRoot?.querySelector('#live-status')
         if (liveRegion) {
             liveRegion.textContent = message
         }
     }
 
-    private _fireChangeEvent() {
+    private fireChangeEvent() {
         const detail: SchmancyAutocompleteChangeEvent['detail'] = {
             value: this.value,
         }
 
         if (this.multi) {
-            detail.values = [...this._selectedValues$.value]
+            detail.values = [...this.selectedValues$.value]
         }
 
         this.dispatchEvent(
@@ -374,47 +374,47 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
     public checkValidity(): boolean {
         if (!this.required) return true
         return this.multi 
-            ? this._selectedValues$.value.length > 0 
-            : Boolean(this._selectedValue$.value)
+            ? this.selectedValues$.value.length > 0 
+            : Boolean(this.selectedValue$.value)
     }
 
     public reportValidity(): boolean {
-        if (this._inputElementRef.value) {
-            return this._inputElementRef.value.reportValidity()
+        if (this.inputElementRef.value) {
+            return this.inputElementRef.value.reportValidity()
         }
         return this.checkValidity()
     }
 
     firstUpdated() {
-        this._setupOptionHandlers()
+        this.setupOptionHandlers()
 
         // Sync initial value with display after options are available
-        this._updateInputDisplay()
+        this.updateInputDisplay()
 
         // Update options when slot changes
         const slot = this.shadowRoot?.querySelector('slot')
         slot?.addEventListener('slotchange', () => {
-            this._setupOptionHandlers()
-            this._updateOptionSelection(this._selectedValue$.value, this._selectedValues$.value)
+            this.setupOptionHandlers()
+            this.updateOptionSelection(this.selectedValue$.value, this.selectedValues$.value)
         })
     }
 
     private handleChipRemove(value: string) {
-        const currentValues = this._selectedValues$.value
+        const currentValues = this.selectedValues$.value
         const newValues = currentValues.filter(v => v !== value)
-        this._selectedValues$.next(newValues)
-        this._fireChangeEvent()
-        this._announceToScreenReader(`Removed: ${this._getChipLabel(value)}`)
+        this.selectedValues$.next(newValues)
+        this.fireChangeEvent()
+        this.announceToScreenReader(`Removed: ${this.getChipLabel(value)}`)
     }
 
-    private _getChipLabel(value: string): string {
-        const option = this._options.find(opt => opt.value === value)
+    private getChipLabel(value: string): string {
+        const option = this.options.find(opt => opt.value === value)
         return option ? option.label || option.textContent || value : value
     }
 
-    private _focusTextInput() {
-        if (this._inputElementRef.value) {
-            this._inputElementRef.value.focus()
+    private focusTextInput() {
+        if (this.inputElementRef.value) {
+            this.inputElementRef.value.focus()
         }
     }
 
@@ -487,16 +487,16 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                                         'ring-error-default focus-within:ring-error-default': this.error,
                                         'cursor-text transition-colors duration-200': true
                                     })}"
-                                    @click=${() => this._focusTextInput()}
+                                    @click=${() => this.focusTextInput()}
                                     role="combobox"
                                     aria-autocomplete="list"
                                     aria-haspopup="listbox"
                                     aria-controls="options"
-                                    aria-expanded=${this._open}
+                                    aria-expanded=${this.open}
                                 >
                                     <!-- Render chips inline -->
                                     ${repeat(
-                                        this._selectedValues$.value,
+                                        this.selectedValues$.value,
                                         value => value,
                                         value => html`
                                             <schmancy-input-chip
@@ -504,49 +504,49 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                                                 @remove=${(e: CustomEvent) => this.handleChipRemove(e.detail.value)}
                                                 class="shrink-0 my-0.5"
                                             >
-                                                ${this._getChipLabel(value)}
+                                                ${this.getChipLabel(value)}
                                             </schmancy-input-chip>
                                         `
                                     )}
 
                                     <!-- Text input for typing -->
                                     <input
-                                        ${ref(this._inputElementRef)}
+                                        ${ref(this.inputElementRef)}
                                         id="autocomplete-input"
                                         type="text"
                                         class="flex-1 min-w-[120px] py-1 bg-transparent border-none outline-none ${fontSize} font-medium text-surface-on placeholder:text-muted"
                                         name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
-                                        .placeholder=${this._selectedValues$.value.length > 0 ? 'Add more...' : this.placeholder}
-                                        .value=${this._inputValue}
+                                        .placeholder=${this.selectedValues$.value.length > 0 ? 'Add more...' : this.placeholder}
+                                        .value=${this.inputValue}
                                         .autocomplete=${this.autocomplete}
                                         aria-invalid=${this.error ? 'true' : 'false'}
                                         aria-required=${this.required ? 'true' : 'false'}
-                                        aria-describedby=${this.error && this.validationMessage ? `${this._a11yId}-err` : nothing}
+                                        aria-describedby=${this.error && this.validationMessage ? `${this.a11yId}-err` : nothing}
                                         aria-label=${!this.label && this.placeholder ? this.placeholder : nothing}
                                         @input=${(e: Event) => {
                                             const value = (e.target as HTMLInputElement).value
-                                            this._inputValue = value
-                                            this._inputValue$.next(value)
+                                            this.inputValue = value
+                                            this.inputValue$.next(value)
                                         }}
                                         @focus=${(e: FocusEvent) => {
                                             e.stopPropagation()
                                             // Clear input on focus for new searches
-                                            this._inputValue = ''
-                                            this._inputValue$.next('')
-                                            this._openDropdown()
+                                            this.inputValue = ''
+                                            this.inputValue$.next('')
+                                            this.openDropdown()
                                         }}
                                         @keydown=${(e: KeyboardEvent) => {
-                                            this._handleKeyDown(e)
+                                            this.handleKeyDown(e)
                                         }}
                                         @blur=${() => {
-                                            this._handleAutoSelectOnBlur()
+                                            this.handleAutoSelectOnBlur()
                                         }}
                                     />
                                 </div>
 
                                 <!-- Validation message -->
                                 ${when(this.error && this.validationMessage, () => html`
-                                    <div id="${this._a11yId}-err" class="mt-1 text-sm text-error-default" role="alert">
+                                    <div id="${this.a11yId}-err" class="mt-1 text-sm text-error-default" role="alert">
                                         ${this.validationMessage}
                                     </div>
                                 `)}
@@ -556,14 +556,14 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                             <!-- Regular single-select input -->
                             <schmancy-input
                                 .size=${this.size}
-                                ${ref(this._inputElementRef)}
+                                ${ref(this.inputElementRef)}
                                 id="autocomplete-input"
                                 class="w-full"
                                 .name=${this.name || this.label?.toLowerCase().replace(/\s+/g, '-') || ''}
                                 .label=${this.label}
                                 .placeholder=${this.placeholder}
                                 .required=${this.required}
-                                .value=${this._inputValue}
+                                .value=${this.inputValue}
                                 type="text"
                                 autocomplete=${this.autocomplete}
                                 clickable
@@ -571,26 +571,26 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                                 aria-autocomplete="list"
                                 aria-haspopup="listbox"
                                 aria-controls="options"
-                                aria-expanded=${this._open}
+                                aria-expanded=${this.open}
                                 aria-describedby=${ifDefined(this.description ? descriptionId : undefined)}
                                 @input=${(e: Event) => {
                                     const value = (e.target as HTMLInputElement).value
-                                    this._inputValue = value
-                                    this._inputValue$.next(value)
+                                    this.inputValue = value
+                                    this.inputValue$.next(value)
                                 }}
                                 @focus=${(e: FocusEvent) => {
                                     e.stopPropagation()
-                                    this._openDropdown()
+                                    this.openDropdown()
                                 }}
                                 @click=${(e: MouseEvent) => {
                                     e.stopPropagation()
-                                    this._openDropdown()
+                                    this.openDropdown()
                                 }}
                                 @keydown=${(e: KeyboardEvent) => {
-                                    this._handleKeyDown(e)
+                                    this.handleKeyDown(e)
                                 }}
                                 @blur=${() => {
-                                    this._handleAutoSelectOnBlur()
+                                    this.handleAutoSelectOnBlur()
                                 }}
                             >
                             </schmancy-input>
@@ -617,14 +617,14 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
                     role="listbox"
                     aria-multiselectable=${this.multi ? 'true' : 'false'}
                     aria-label=${`${this.label || 'Options'} dropdown`}
-                    ?hidden=${!this._open}
-                    style="max-height: ${this.maxHeight}; display: ${this._open ? 'flex' : 'none'};"
+                    ?hidden=${!this.open}
+                    style="max-height: ${this.maxHeight}; display: ${this.open ? 'flex' : 'none'};"
                     @slotchange=${() => {
-                        this._setupOptionHandlers()
+                        this.setupOptionHandlers()
                     }}
                 >
                     <slot></slot>
-                    ${!this._hasResults ? html`
+                    ${!this.hasResults ? html`
                         <li class="px-3 py-2 text-sm text-muted">No results found</li>
                     ` : ''}
                 </ul>
@@ -632,19 +632,19 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
         `
     }
 
-    private _handleAutoSelectOnBlur() {
+    private handleAutoSelectOnBlur() {
         // Only auto-select in single-select mode and when dropdown is open with a search term
-        if (this.multi || !this._open || !this._inputValue.trim()) {
+        if (this.multi || !this.open || !this.inputValue.trim()) {
             return
         }
         
-        const searchTerm = this._inputValue.trim()
+        const searchTerm = this.inputValue.trim()
         
         // Find the best matching option using the same similarity logic as filtering
         let bestMatch: SchmancyOption | null = null
         let bestScore = 0
         
-        this._options.forEach(option => {
+        this.options.forEach(option => {
             // Skip hidden options
             if (option.hidden) return
             
@@ -669,19 +669,19 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
         // Auto-select the best match if found
         if (bestMatch) {
             // Silently update the selected value without firing change event
-            this._selectedValue$.next(bestMatch.value)
-            this._inputValue = bestMatch.label || bestMatch.textContent || ''
-            this._inputValue$.next(this._inputValue)
-            this._open = false
+            this.selectedValue$.next(bestMatch.value)
+            this.inputValue = bestMatch.label || bestMatch.textContent || ''
+            this.inputValue$.next(this.inputValue)
+            this.open = false
         }
     }
 
-    private _handleKeyDown(event: KeyboardEvent) {
-        const isOpen = this._open
-        const selectedValues = this._selectedValues$.value
+    private handleKeyDown(event: KeyboardEvent) {
+        const isOpen = this.open
+        const selectedValues = this.selectedValues$.value
 
         // Handle backspace to remove last chip in multi-select when input is empty
-        if (this.multi && event.key === 'Backspace' && !this._inputValue && selectedValues.length > 0 && !isOpen) {
+        if (this.multi && event.key === 'Backspace' && !this.inputValue && selectedValues.length > 0 && !isOpen) {
             event.preventDefault()
             const lastValue = selectedValues[selectedValues.length - 1]
             this.handleChipRemove(lastValue)
@@ -690,12 +690,12 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
 
         if (!isOpen && (event.key === 'ArrowDown' || event.key === 'Enter')) {
             event.preventDefault()
-            this._openDropdown()
+            this.openDropdown()
 
             timer(10)
                 .pipe(takeUntil(this.disconnecting))
                 .subscribe(() => {
-                    const firstVisible = this._options.find(opt => !opt.hidden)
+                    const firstVisible = this.options.find(opt => !opt.hidden)
                     firstVisible?.focus()
                 })
             return
@@ -703,7 +703,7 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
 
         if (!isOpen) return
 
-        const visibleOptions = this._options.filter(opt => !opt.hidden)
+        const visibleOptions = this.options.filter(opt => !opt.hidden)
             .toSorted((a, b) => parseInt(a.style.order || '0') - parseInt(b.style.order || '0'))
 
         const focusedOption = visibleOptions.find(opt => opt === document.activeElement)
@@ -712,14 +712,14 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
         switch (event.key) {
             case 'Escape':
                 event.preventDefault()
-                this._open = false
-                this._updateInputDisplay()
-                this._inputElementRef.value?.focus()
+                this.open = false
+                this.updateInputDisplay()
+                this.inputElementRef.value?.focus()
                 break
 
             case 'Tab':
-                this._open = false
-                this._updateInputDisplay()
+                this.open = false
+                this.updateInputDisplay()
                 break
 
             case 'ArrowDown':
@@ -748,7 +748,7 @@ export default class SchmancyAutocomplete extends SchmancyFormField(unsafeCSS(st
             case ' ':
                 if (focusedOption) {
                     event.preventDefault()
-                    this._selectOption(focusedOption)
+                    this.selectOption(focusedOption)
                 }
                 break
         }