fix(input): clear button display on focus (without hovering)

Make sure to emit bqInput on clear action too.
Endava · Jul 19, 2023 · 3ebaf26 · 3ebaf26
1 parent 10fcdfa
commit 3ebaf26
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/packages/bee-q/src/components/input/bq-input.tsx b/packages/bee-q/src/components/input/bq-input.tsx
@@ -270,6 +270,7 @@ export class BqInput {
     this.value = this.inputElem.value;
 
     this.bqClear.emit(this.el);
+    this.bqInput.emit({ value: this.value, el: this.el });
     this.bqChange.emit({ value: this.value, el: this.el });
     this.inputElem.focus();
 
@@ -311,7 +312,7 @@ export class BqInput {
         {/* Input control group */}
         <div
           class={{
-            'bq-input--control group': true,
+            'bq-input--control': true,
             [`validation-${this.validationStatus}`]: true,
             disabled: this.disabled,
           }}
@@ -362,7 +363,7 @@ export class BqInput {
             // The clear button will be visible as long as the input has a value
             // and the parent group is hovered or has focus-within
             <bq-button
-              class="bq-input--control__clear ms-[--bq-input--gap] hidden group-hover:inline-block group-[&:has(:focus-within)]:inline-block"
+              class="bq-input--control__clear ms-[--bq-input--gap] hidden"
               appearance="text"
               aria-label={this.clearButtonLabel}
               size="small"

diff --git a/packages/bee-q/src/components/input/scss/bq-input.scss b/packages/bee-q/src/components/input/scss/bq-input.scss
@@ -58,6 +58,14 @@
 
     @apply focus border-[color:--bq-input--border-color-focus];
   }
+
+  // Enable clear button whenever the input group control is hovered or has focus
+  &:not(.disabled):hover,
+  &:not(.disabled):focus-within {
+    .bq-input--control__clear {
+      @apply inline-block;
+    }
+  }
 }
 
 .bq-input--control.disabled {