fix(select): initial value update. Closes #872

baloise · Nov 14, 2022 · 6139bb3 · 6139bb3
1 parent b01f17c
commit 6139bb3
Showing 1 changed file with 17 additions and 17 deletions.
diff --git a/packages/components/src/components/form/bal-select/bal-select.tsx b/packages/components/src/components/form/bal-select/bal-select.tsx
@@ -75,7 +75,7 @@ export class Select implements ComponentInterface, Loggable {
 
   @State() hasFocus = false
   @State() inputValue = ''
-  @State() focusIndex = 0
+  @State() focusIndex = -1
   @State() isPopoverOpen = false
   @State() options: Map<string, BalOptionController> = new Map<string, BalOptionController>()
   @State() labelToScrollTo = ''
@@ -196,7 +196,6 @@ export class Select implements ComponentInterface, Loggable {
 
   @Watch('value')
   valueWatcher() {
-    console.log('valueWatcher', this.value, this.rawValue)
     this.updateRawValue(false)
   }
 
@@ -205,7 +204,6 @@ export class Select implements ComponentInterface, Loggable {
     if (!areArraysEqual(newValue, oldValue || [])) {
       this.rawValue = newValue
       this.syncNativeInput()
-      console.log('rawValueWatcher', this.value, this.rawValue)
       if (this.didInit && isHuman) {
         if (this.multiple) {
           if (isNil(this.rawValue)) {
@@ -409,7 +407,7 @@ export class Select implements ComponentInterface, Loggable {
    */
   @Method()
   async clear() {
-    this.focusIndex = 0
+    this.focusIndex = -1
     if (this.inputElement) {
       this.updateInputValue('')
       this.rawValue = []
@@ -500,11 +498,9 @@ export class Select implements ComponentInterface, Loggable {
       }
     }
     this.options = new Map(options)
-    if (!this.remote) {
-      this.syncNativeInput()
-      if (this.didInit) {
-        this.validateAfterBlur()
-      }
+    this.syncNativeInput()
+    if (this.didInit) {
+      this.validateAfterBlur()
     }
   }
 
@@ -560,8 +556,8 @@ export class Select implements ComponentInterface, Loggable {
    ********************************************************/
   private updateFocusTimer?: NodeJS.Timer
   private updateFocus() {
-    if (this.focusIndex < 0) {
-      this.focusIndex = 0
+    if (this.focusIndex < -1) {
+      this.focusIndex = -1
     }
 
     const visibleOptions = this.optionArray
@@ -581,7 +577,7 @@ export class Select implements ComponentInterface, Loggable {
         }
       }
     } else {
-      this.focusIndex = 0
+      this.focusIndex = -1
     }
   }
 
@@ -618,7 +614,9 @@ export class Select implements ComponentInterface, Loggable {
     const visibleOptions = this.optionArray
     if (visibleOptions.length > this.focusIndex) {
       const focusedOption = visibleOptions[this.focusIndex]
-      this.optionSelected(focusedOption)
+      if (focusedOption) {
+        this.optionSelected(focusedOption)
+      }
     }
   }
 
@@ -800,7 +798,7 @@ export class Select implements ComponentInterface, Loggable {
     if (this.isPopoverOpen) {
       this.updateFocus()
     } else {
-      this.focusIndex = 0
+      this.focusIndex = -1
       if (this.multiple && this.typeahead) {
         this.updateInputValue('')
       }
@@ -845,7 +843,7 @@ export class Select implements ComponentInterface, Loggable {
     if (this.disabled || this.readonly) {
       preventDefault(event)
     } else {
-      this.focusIndex = 0
+      this.focusIndex = -1
       this.balClick.emit(event)
 
       if (this.typeahead) {
@@ -882,7 +880,7 @@ export class Select implements ComponentInterface, Loggable {
         this.popoverElement.present()
       }
 
-      this.focusIndex = 0
+      this.focusIndex = -1
       this.updateFocus()
       preventDefault(event)
 
@@ -1038,7 +1036,9 @@ export class Select implements ComponentInterface, Loggable {
                 data-label={option.label}
                 class={{
                   ...optionEl.class(),
-                  ...optionEl.modifier('selected').class(valuesArray.includes(option.value)),
+                  ...optionEl
+                    .modifier('selected')
+                    .class(valuesArray.includes(option.value) && !(this.typeahead && !this.multiple)),
                   ...optionEl.modifier('focused').class(this.focusIndex === index),
                   ...optionEl.modifier('checkbox').class(this.multiple),
                   ...optionEl.modifier('disabled').class(option.disabled === true),