[EuiComboBox] Refactor singleSelection.asPlainText to make greater use of the underlying input element

src/components/combo_box/_combo_box.scss

@@ -45,9 +45,32 @@
       height: auto;  /* 3 */
       flex-wrap: wrap; /* 1 */
       align-content: flex-start;
+      cursor: text;
+    }
+
+    &.euiComboBox__inputWrap--noWrap {
+      align-items: center;
+    }
+
+    // Match placeholder and plain text position to EuiFieldText
+    &.euiComboBox__inputWrap--plainText {
+      padding-inline-start: $euiSizeS;
+    }
+
+    .euiComboBoxPlainTextSelection {
+      &__prepend,
+      &__append {
+        flex-shrink: 0;
+        margin-inline: $euiSizeXS / 2;
+        display: flex; /* Vertically centers any icons */
+      }
+
+      &__prepend {
+        margin-inline-start: $euiSizeXS;
+      }
 
-      &:hover {
-        cursor: text;
+      &__append {
+        margin-inline-end: $euiSizeXS;
       }
     }
   }
@@ -56,6 +79,7 @@
    * 1. Force field height to match other field heights.
    * 2. Force input height to expand to fill this element.
    * 3. Reset input appearance to mimic text
+   * 4. Ensure that no input states are visible on the hidden input
    */
   .euiComboBox__input {
     block-size: $euiSizeL; /* 2 */
@@ -64,11 +88,20 @@
     margin: $euiSizeXS;
 
     /* 3 */
-    appearance: none;
-    outline: none;
-    border: none;
     background: transparent;
-    color: $euiTextColor;
+    @include euiFormControlText;
+
+    &:disabled {
+      @include euiFormControlDisabledStyle;
+    }
+
+    /* 4 */
+    // stylelint-disable declaration-no-important
+    appearance: none !important;
+    border: none !important;
+    box-shadow: none !important;
+    outline: none !important;
+    // stylelint-enable declaration-no-important
   }
 
   &.euiComboBox-isOpen {
@@ -94,22 +127,21 @@
       -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
-    .euiComboBoxPlaceholder,
-    .euiComboBoxPill--plainText {
-      @include euiFormControlDisabledTextStyle;
-    }
-
     // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
-    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+    .euiComboBox__inputWrap,
+    .euiComboBoxPill {
       cursor: not-allowed;
     }
   }
 
   &.euiComboBox--compressed {
     .euiComboBox__inputWrap {
       line-height: $euiFormControlCompressedHeight; /* 2 */
-      padding-top: 0;
-      padding-bottom: 0;
+      padding-block: 0;
+
+      &--plainText {
+        padding-inline-start: $euiSizeXS;
+      }
     }
   }
 }

src/components/combo_box/combo_box.spec.tsx

@@ -232,6 +232,7 @@ describe('EuiComboBox', () => {
       });
     });
   });
+
   describe('selection', () => {
     const defaultOptions: Array<EuiComboBoxOptionOption<{}>> = [
       { label: 'Item 1' },
@@ -311,6 +312,51 @@ describe('EuiComboBox', () => {
       });
     });
 
+    describe('single selection', () => {
+      describe('closes the combobox on dropdown selection, and re-opens on input click', () => {
+        it('as pill', () => {
+          cy.mount(<StatefulComboBox singleSelection={true} />);
+          cy.get('[data-test-subj="comboBoxInput"]').click();
+
+          cy.get('[data-test-subj="comboBoxOptionsList"]')
+            .find('button')
+            .first()
+            .click();
+          cy.get('[data-test-subj="comboBoxOptionsList"]').should('not.exist');
+          cy.focused().should(
+            'have.attr',
+            'data-test-subj',
+            'comboBoxSearchInput'
+          );
+
+          cy.get('[data-test-subj="comboBoxInput"]').click();
+          cy.get('[data-test-subj="comboBoxOptionsList"]').should('be.visible');
+        });
+
+        it('as plain text', () => {
+          cy.mount(
+            // @ts-ignore - not totally sure why TS is kicking up a fuss here
+            <StatefulComboBox singleSelection={{ asPlainText: true }} />
+          );
+          cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+
+          cy.get('[data-test-subj="comboBoxOptionsList"]')
+            .find('button')
+            .first()
+            .click();
+          cy.get('[data-test-subj="comboBoxOptionsList"]').should('not.exist');
+          cy.focused().should(
+            'have.attr',
+            'data-test-subj',
+            'comboBoxSearchInput'
+          );
+
+          cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+          cy.get('[data-test-subj="comboBoxOptionsList"]').should('be.visible');
+        });
+      });
+    });
+
     describe('backspace to delete last pill', () => {
       it('does not delete the last pill if there is search text', () => {
         cy.realMount(<StatefulComboBox />);
@@ -361,6 +407,28 @@ describe('EuiComboBox', () => {
         cy.get('.euiComboBoxPill').should('have.length', 1);
       });
 
+      it('`asPlainText`: deletes the selection and only a single character', () => {
+        cy.realMount(
+          // @ts-ignore - not totally sure why TS is kicking up a fuss here
+          <StatefulComboBox singleSelection={{ asPlainText: true }} />
+        );
+        cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.get('[data-test-subj=comboBoxSearchInput]').should(
+          'have.value',
+          'Item 1'
+        );
+        cy.get('[data-test-subj="comboBoxClearButton"]').should('exist'); // indicates selection
+
+        cy.get('[data-test-subj=comboBoxSearchInput]').realPress('Backspace');
+        cy.get('[data-test-subj="comboBoxClearButton"]').should('not.exist'); // selection removed
+        cy.get('[data-test-subj=comboBoxSearchInput]').should(
+          'have.value',
+          'Item '
+        );
+      });
+
       it('opens up the selection list again after deleting the active single selection ', () => {
         cy.realMount(<StatefulComboBox singleSelection />);
         cy.get('[data-test-subj=comboBoxSearchInput]').realClick();