Refactor names in codebase (#112)

app/assets/javascripts/controllers/hw_combobox_controller.js

@@ -12,6 +12,7 @@ const concerns = [
   Combobox.Dialog,
   Combobox.Events,
   Combobox.Filtering,
+  Combobox.FormField,
   Combobox.Navigation,
   Combobox.NewOptions,
   Combobox.Options,
@@ -80,9 +81,9 @@ export default class HwComboboxController extends Concerns(...concerns) {
 
     if (inputType && inputType !== "hw:lockInSelection") {
       if (delay) await sleep(delay)
-      this._selectBasedOnQuery({ inputType })
+      this._selectOnQuery({ inputType })
     } else {
-      this._preselectOption()
+      this._preselect()
     }
   }
 }

app/assets/javascripts/hw_combobox/models/combobox.js

@@ -6,6 +6,7 @@ import "hw_combobox/models/combobox/autocomplete"
 import "hw_combobox/models/combobox/dialog"
 import "hw_combobox/models/combobox/events"
 import "hw_combobox/models/combobox/filtering"
+import "hw_combobox/models/combobox/form_field"
 import "hw_combobox/models/combobox/navigation"
 import "hw_combobox/models/combobox/new_options"
 import "hw_combobox/models/combobox/options"

app/assets/javascripts/hw_combobox/models/combobox/dialog.js

@@ -53,7 +53,7 @@ Combobox.Dialog = Base => class extends Base {
     this.dialogFocusTrapTarget.focus()
   }
 
-  get _smallViewport() {
+  get _isSmallViewport() {
     return window.matchMedia(`(max-width: ${this.smallViewportMaxWidthValue})`).matches
   }
 

app/assets/javascripts/hw_combobox/models/combobox/events.js

@@ -3,24 +3,27 @@ import { dispatch } from "hw_combobox/helpers"
 
 Combobox.Events = Base => class extends Base {
   _dispatchSelectionEvent({ isNewAndAllowed, previousValue }) {
-    if (previousValue !== this._value) {
-      dispatch("hw-combobox:selection", {
-        target: this.element,
-        detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
-      })
-    }
+    if (previousValue === this._fieldValue) return
+
+    dispatch("hw-combobox:selection", {
+      target: this.element,
+      detail: { ...this._eventableDetails, isNewAndAllowed, previousValue }
+    })
   }
 
   _dispatchClosedEvent() {
-    dispatch("hw-combobox:closed", { target: this.element, detail: this._eventableDetails })
+    dispatch("hw-combobox:closed", {
+      target: this.element,
+      detail: this._eventableDetails
+    })
   }
 
   get _eventableDetails() {
     return {
-      value: this._value,
+      value: this._fieldValue,
       display: this._fullQuery,
       query: this._typedQuery,
-      fieldName: this.hiddenFieldTarget.name,
+      fieldName: this._fieldName,
       isValid: this._valueIsValid
     }
   }

app/assets/javascripts/hw_combobox/models/combobox/filtering.js

@@ -8,7 +8,7 @@ Combobox.Filtering = Base => class extends Base {
     this._filter(event)
 
     if (this._isSync) {
-      this._selectBasedOnQuery(event)
+      this._selectOnQuery(event)
     } else {
       // noop, async selection is handled by stimulus callbacks
     }
@@ -25,7 +25,7 @@ Combobox.Filtering = Base => class extends Base {
       this._filterSync()
     }
 
-    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
+    this._markQueried()
   }
 
   _debouncedFilterAsync(event) {
@@ -43,7 +43,6 @@ Combobox.Filtering = Base => class extends Base {
   }
 
   _filterSync() {
-    this.open()
     this._allOptionElements.forEach(applyFilter(this._fullQuery, { matching: this.filterableAttributeValue }))
   }
 
@@ -52,6 +51,10 @@ Combobox.Filtering = Base => class extends Base {
     this.filterAndSelect({ inputType: "deleteContentBackward" })
   }
 
+  _markQueried() {
+    this._actingCombobox.toggleAttribute("data-queried", this._isQueried)
+  }
+
   get _isQueried() {
     return this._fullQuery.length > 0
   }

app/assets/javascripts/hw_combobox/models/combobox/form_field.js

@@ -0,0 +1,19 @@
+import Combobox from "hw_combobox/models/combobox/base"
+
+Combobox.FormField = Base => class extends Base {
+  _setFieldValue(value) {
+    this.hiddenFieldTarget.value = value
+  }
+
+  _setFieldName(value) {
+    this.hiddenFieldTarget.name = value
+  }
+
+  get _fieldValue() {
+    return this.hiddenFieldTarget.value
+  }
+
+  get _fieldName() {
+    return this.hiddenFieldTarget.name
+  }
+}

app/assets/javascripts/hw_combobox/models/combobox/options.js

@@ -11,7 +11,7 @@ Combobox.Options = Base => class extends Base {
   }
 
   _resetOptions(deselectionStrategy) {
-    this._setName(this.originalNameValue)
+    this._setFieldName(this.originalNameValue)
     deselectionStrategy()
   }
 
@@ -40,7 +40,7 @@ Combobox.Options = Base => class extends Base {
   }
 
   get _isUnjustifiablyBlank() {
-    const valueIsMissing = !this._value
+    const valueIsMissing = !this._fieldValue
     const noBlankOptionSelected = !this._selectedOptionElement
 
     return valueIsMissing && noBlankOptionSelected

app/assets/javascripts/hw_combobox/models/combobox/selection.js

@@ -2,7 +2,7 @@ import Combobox from "hw_combobox/models/combobox/base"
 import { wrapAroundAccess, isDeleteEvent } from "hw_combobox/helpers"
 
 Combobox.Selection = Base => class extends Base {
-  selectOptionOnClick(event) {
+  selectOnClick(event) {
     this._forceSelectionAndFilter(event.currentTarget, event)
     this.close()
   }
@@ -13,12 +13,12 @@ Combobox.Selection = Base => class extends Base {
     }
   }
 
-  _selectBasedOnQuery(event) {
-    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(event))) {
+  _selectOnQuery(inputEvent) {
+    if (this._shouldTreatAsNewOptionForFiltering(!isDeleteEvent(inputEvent))) {
       this._selectNew()
-    } else if (isDeleteEvent(event)) {
+    } else if (isDeleteEvent(inputEvent)) {
       this._deselect()
-    } else if (event.inputType === "hw:lockInSelection" && this._ensurableOption) {
+    } else if (inputEvent.inputType === "hw:lockInSelection" && this._ensurableOption) {
       this._selectAndAutocompleteMissingPortion(this._ensurableOption)
     } else if (this._isOpen && this._visibleOptionElements[0]) {
       this._selectAndAutocompleteMissingPortion(this._visibleOptionElements[0])
@@ -29,20 +29,20 @@ Combobox.Selection = Base => class extends Base {
       // When selecting from an async dialog listbox: selection is forced, the listbox is filtered,
       // and the dialog is closed. Filtering ends with an `endOfOptionsStream` target connected
       // to the now invisible combobox, which is now closed because Turbo waits for "nextRepaint"
-      // before rendering turbo streams. This ultimately calls +_selectBasedOnQuery+. We do want
-      // to call +_selectBasedOnQuery+ in this case to account for e.g. selection of
+      // before rendering turbo streams. This ultimately calls +_selectOnQuery+. We do want
+      // to call +_selectOnQuery+ in this case to account for e.g. selection of
       // new options. But we will noop here if it's none of the cases checked above.
     }
   }
 
   _select(option, autocompleteStrategy) {
-    const previousValue = this._value
+    const previousValue = this._fieldValue
 
     this._resetOptionsSilently()
 
     autocompleteStrategy(option)
 
-    this._setValue(option.dataset.value)
+    this._setFieldValue(option.dataset.value)
     this._markSelected(option)
     this._markValid()
     this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
@@ -51,23 +51,23 @@ Combobox.Selection = Base => class extends Base {
   }
 
   _selectNew() {
-    const previousValue = this._value
+    const previousValue = this._fieldValue
 
     this._resetOptionsSilently()
-    this._setValue(this._fullQuery)
-    this._setName(this.nameWhenNewValue)
+    this._setFieldValue(this._fullQuery)
+    this._setFieldName(this.nameWhenNewValue)
     this._markValid()
     this._dispatchSelectionEvent({ isNewAndAllowed: true, previousValue: previousValue })
   }
 
   _deselect() {
-    const previousValue = this._value
+    const previousValue = this._fieldValue
 
     if (this._selectedOptionElement) {
       this._markNotSelected(this._selectedOptionElement)
     }
 
-    this._setValue(null)
+    this._setFieldValue(null)
     this._setActiveDescendant("")
 
     return previousValue
@@ -78,36 +78,36 @@ Combobox.Selection = Base => class extends Base {
     this._dispatchSelectionEvent({ isNewAndAllowed: false, previousValue: previousValue })
   }
 
-  _forceSelectionAndFilter(option, event) {
-    this._forceSelectionWithoutFiltering(option)
-    this._filter(event)
-  }
-
-  _forceSelectionWithoutFiltering(option) {
-    this._selectAndReplaceFullQuery(option)
-  }
-
   _selectIndex(index) {
     const option = wrapAroundAccess(this._visibleOptionElements, index)
     this._forceSelectionWithoutFiltering(option)
   }
 
-  _preselectOption() {
+  _preselect() {
     if (this._hasValueButNoSelection && this._allOptions.length < 100) {
       const option = this._allOptions.find(option => {
-        return option.dataset.value === this._value
+        return option.dataset.value === this._fieldValue
       })
 
       if (option) this._markSelected(option)
     }
   }
 
-  _selectAndReplaceFullQuery(option) {
+  _selectAndAutocompleteMissingPortion(option) {
+    this._select(option, this._autocompleteMissingPortion.bind(this))
+  }
+
+  _selectAndAutocompleteFullQuery(option) {
     this._select(option, this._replaceFullQueryWithAutocompletedValue.bind(this))
   }
 
-  _selectAndAutocompleteMissingPortion(option) {
-    this._select(option, this._autocompleteMissingPortion.bind(this))
+  _forceSelectionAndFilter(option, event) {
+    this._forceSelectionWithoutFiltering(option)
+    this._filter(event)
+  }
+
+  _forceSelectionWithoutFiltering(option) {
+    this._selectAndAutocompleteFullQuery(option)
   }
 
   _lockInSelection() {
@@ -136,20 +136,8 @@ Combobox.Selection = Base => class extends Base {
     this._setActiveDescendant("")
   }
 
-  _setValue(value) {
-    this.hiddenFieldTarget.value = value
-  }
-
-  _setName(value) {
-    this.hiddenFieldTarget.name = value
-  }
-
-  get _value() {
-    return this.hiddenFieldTarget.value
-  }
-
   get _hasValueButNoSelection() {
-    return this._value && !this._selectedOptionElement
+    return this._fieldValue && !this._selectedOptionElement
   }
 
   get _shouldLockInSelection() {

app/assets/javascripts/hw_combobox/models/combobox/toggle.js

@@ -71,9 +71,9 @@ Combobox.Toggle = Base => class extends Base {
   }
 
   _expand() {
-    if (this._preselectOnExpansion) this._preselectOption()
+    if (this._preselectOnExpansion) this._preselect()
 
-    if (this._autocompletesList && this._smallViewport) {
+    if (this._autocompletesList && this._isSmallViewport) {
       this._openInDialog()
     } else {
       this._openInline()

app/assets/javascripts/hw_combobox/models/combobox/validity.js

@@ -34,7 +34,7 @@ Combobox.Validity = Base => class extends Base {
   // +_valueIsInvalid+ only checks if `comboboxTarget` (and not `_actingCombobox`) is required
   // because the `required` attribute is only forwarded to the `comboboxTarget` element
   get _valueIsInvalid() {
-    const isRequiredAndEmpty = this.comboboxTarget.required && !this._value
+    const isRequiredAndEmpty = this.comboboxTarget.required && !this._fieldValue
     return isRequiredAndEmpty
   }
 }

app/presenters/hotwire_combobox/listbox/option.rb

@@ -37,7 +37,7 @@ def id
 
     def data
       {
-        action: "click->hw-combobox#selectOptionOnClick",
+        action: "click->hw-combobox#selectOnClick",
         filterable_as: filterable_as,
         autocompletable_as: autocompletable_as,
         value: value