🐛 fix(bal-select): is not cleared - select first option

.changeset/soft-apricots-divide.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**select**: select first option as default and value can be reset

e2e/cypress/component/bal-select.cy.ts

@@ -63,7 +63,7 @@ describe('bal-select', () => {
 
   it('should select option with the key entry plus enter', () => {
     cy.get('bal-select').find('.bal-select__control__input').click()
-    cy.get('bal-select').type('{downArrow}').type('{enter}')
+    cy.get('bal-select').type('{enter}')
 
     cy.get('@balChange').should('have.been.calledOnce')
     cy.get('@balChange').shouldHaveEventDetail('v1995')
@@ -105,7 +105,7 @@ describe('bal-select', () => {
 
     cy.get('bal-select').find('.bal-select__control__input').click()
     cy.get('bal-select').find('.bal-select__control__input').type('{1}').type('{9}').type('{9}')
-    cy.get('bal-select').type('{downArrow}').type('{enter}').blur({ force: true })
+    cy.get('bal-select').type('{enter}').blur({ force: true })
 
     cy.get('@balChange').should('have.been.calledOnce')
     cy.get('@balChange').shouldHaveEventDetail('v1995')
@@ -130,7 +130,7 @@ describe('bal-select', () => {
     cy.get('bal-select').invoke('attr', 'multiple', true)
 
     cy.get('bal-select').find('.bal-select__control__selections').click()
-    cy.get('bal-select').type('{downArrow}').type('{enter}')
+    cy.get('bal-select').type('{enter}')
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
     cy.get('@balChange').should('have.been.callCount', 2)
@@ -170,7 +170,7 @@ describe('bal-select', () => {
     cy.get('bal-select').invoke('attr', 'multiple', true).invoke('attr', 'typeahead', true)
 
     cy.get('bal-select').find('.bal-select__control__selections').click()
-    cy.get('bal-select').type('{downArrow}').type('{enter}')
+    cy.get('bal-select').type('{enter}')
     cy.get('bal-select').type('{downArrow}').type('{enter}')
 
     cy.get('@balChange').should('have.been.callCount', 2)
@@ -210,7 +210,7 @@ describe('bal-select', () => {
 
     cy.get('bal-select').find('.bal-select__control__selections').click()
     cy.get('bal-select').find('.bal-select__control__input').type('{1}').type('{9}').type('{9}')
-    cy.get('bal-select').type('{downArrow}').type('{enter}')
+    cy.get('bal-select').type('{enter}')
 
     cy.get('@balChange').should('have.been.callCount', 1)
     cy.get('@balChange').shouldHaveEventDetail(['v1995'])

e2e/cypress/e2e/base/bal-select.cy.ts

@@ -24,7 +24,7 @@ describe('bal-select', () => {
   describe('typeahead', () => {
     it('should clear select and search for the Black Widow', () => {
       cy.getByTestId('typeahead').clear().blur()
-      cy.getByTestId('typeahead').type('Black{downArrow}{enter}').blur().should('have.value', 'Black Widow')
+      cy.getByTestId('typeahead').type('Black{enter}').blur().should('have.value', 'Black Widow')
     })
   })
 
@@ -48,7 +48,7 @@ describe('bal-select', () => {
     it('should restore initial value when it has been reset', () => {
       // First we change the initial values to 1995
       cy.getByTestId('reset-basic').click().select('1995')
-      cy.getByTestId('reset-typeahead').clear().type('1995{downArrow}{enter}')
+      cy.getByTestId('reset-typeahead').clear().type('1995{enter}')
       cy.getByTestId('reset-multiple').click().balSelectFindOptions().first().click()
       cy.getByTestId('reset-multiple').balSelectFindOptions().eq(1).click()
       cy.getByTestId('reset-multiple').balSelectFindOptions().eq(2).click()

packages/core/src/components/bal-dropdown/bal-dropdown.sass

@@ -176,7 +176,6 @@
   min-height: 2rem
 
 .bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded)
-
   border: none
   background: var(--bal-color-background-grey-light)
 

packages/core/src/components/bal-dropdown/bal-dropdown.vars.sass

@@ -50,8 +50,8 @@
   --bal-dropdown-control-input-multiple-background-read-only-selection: transparent
   --bal-dropdown-control-input-option-background: transparent
   --bal-dropdown-control-input-option-background-selected: var(--bal-color-primary-1)
-  --bal-dropdown-control-input-option-background-focused: var(--bal-color-grey-2)
-  --bal-dropdown-control-input-option-background-hover: var(--bal-color-grey-2)
+  --bal-dropdown-control-input-option-background-focused: var(--bal-color-grey-3)
+  --bal-dropdown-control-input-option-background-hover: var(--bal-color-grey-3)
   //
   // border radius
   --bal-dropdown-control-border-radius: var(--bal-form-field-control-radius)

packages/core/src/components/bal-option/bal-option.vars.sass

@@ -23,7 +23,7 @@
   //
   // background colors
   --bal-option-background: var(--bal-color-white)
-  --bal-option-background-hovered: var(--bal-color-grey-2)
+  --bal-option-background-hovered: var(--bal-color-grey-3)
   --bal-option-background-selected: var(--bal-color-primary-1)
   --bal-option-background-selected-hovered: #dddfeb
   --bal-option-background-invalid: var(--bal-color-danger-1)

packages/core/src/components/bal-select/bal-select.tsx

@@ -1,21 +1,27 @@
 import {
   Component,
+  ComponentInterface,
+  Element,
+  Event,
+  EventEmitter,
   h,
   Host,
-  State,
+  Listen,
+  Method,
   Prop,
+  State,
   Watch,
-  EventEmitter,
-  Event,
-  Method,
-  Element,
-  Listen,
-  ComponentInterface,
 } from '@stencil/core'
 import isNil from 'lodash.isnil'
-import { debounce, deepReady, isDescendant, rIC, waitAfterIdleCallback } from '../../utils/helpers'
+import { ariaBooleanToString } from '../../utils/aria'
 import { areArraysEqual } from '../../utils/array'
-import { isArrowDownKey, isArrowUpKey, isEnterKey, isEscapeKey, isSpaceKey, isBackspaceKey } from '../../utils/keyboard'
+import { BEM } from '../../utils/bem'
+import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { stopEventBubbling } from '../../utils/form-input'
+import { debounce, deepReady, isDescendant, rIC, waitAfterIdleCallback } from '../../utils/helpers'
+import { isArrowDownKey, isArrowUpKey, isBackspaceKey, isEnterKey, isEscapeKey, isSpaceKey } from '../../utils/keyboard'
+import { Loggable, Logger, LogInstance } from '../../utils/log'
+import { BalOptionValue } from './utils/bal-option.type'
 import {
   addValue,
   findLabelByValue,
@@ -29,12 +35,6 @@ import {
   validateAfterBlur,
 } from './utils/utils'
 import { watchForOptions } from './utils/watch-options'
-import { BalOptionValue } from './utils/bal-option.type'
-import { stopEventBubbling } from '../../utils/form-input'
-import { BEM } from '../../utils/bem'
-import { Loggable, Logger, LogInstance } from '../../utils/log'
-import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
-import { ariaBooleanToString } from '../../utils/aria'
 
 export interface BalOptionController extends BalOptionValue {
   id: string
@@ -408,7 +408,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
    */
   @Method()
   async clear() {
-    this.focusIndex = -1
+    this.focusIndex = 0
     if (this.inputElement) {
       this.updateInputValue('')
       this.updateRawValue([], isHuman)
@@ -568,8 +568,8 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
    ********************************************************/
   private updateFocusTimer?: NodeJS.Timeout
   private updateFocus() {
-    if (this.focusIndex < -1) {
-      this.focusIndex = -1
+    if (this.focusIndex < 0) {
+      this.focusIndex = 0
     }
 
     const visibleOptions = this.optionArray
@@ -589,7 +589,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
         }
       }
     } else {
-      this.focusIndex = -1
+      this.focusIndex = 0
     }
   }
 
@@ -787,6 +787,8 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
           label = valuesArray.join(', ')
         }
         return this.updateInputValue(label)
+      } else {
+        return this.updateInputValue('')
       }
     }
     return Promise.resolve()
@@ -832,7 +834,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
       if (this.isPopoverOpen) {
         this.updateFocus()
       } else {
-        this.focusIndex = -1
+        this.focusIndex = 0
         if (this.multiple && this.typeahead) {
           this.updateInputValue('')
         }
@@ -886,7 +888,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
     if (this.disabled || this.readonly) {
       preventDefault(ev)
     } else {
-      this.focusIndex = -1
+      this.focusIndex = 0
       this.balInputClick.emit(ev)
 
       if (this.typeahead) {
@@ -927,7 +929,7 @@ export class Select implements ComponentInterface, Loggable, BalAriaFormLinking
         this.popoverElement.present()
       }
 
-      this.focusIndex = -1
+      this.focusIndex = 0
       this.updateFocus()
       preventDefault(ev)
 

packages/core/src/components/bal-select/bal-select.vars.sass

@@ -50,8 +50,8 @@
   --bal-select-control-input-multiple-background-read-only-selection: transparent
   --bal-select-control-input-option-background: transparent
   --bal-select-control-input-option-background-selected: var(--bal-color-primary-1)
-  --bal-select-control-input-option-background-focused: var(--bal-color-grey-2)
-  --bal-select-control-input-option-background-hover: var(--bal-color-grey-2)
+  --bal-select-control-input-option-background-focused: var(--bal-color-grey-3)
+  --bal-select-control-input-option-background-hover: var(--bal-color-grey-3)
   //
   // border radius
   --bal-select-control-border-radius: var(--bal-form-field-control-radius)

tsconfig.base.json

@@ -67,4 +67,4 @@
     "node_modules",
     "tmp"
   ]
-}
+}