Add support for dropdowns and non-icons in inputs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## Next
+
+- Added support for dropdowns and non-icon elements to `sl-input`
+
 ## 2.0.0-beta.19
 
 - Added `input`, `label`, `prefix`, `clear-button`, `suffix`, `help-text` exported parts to `sl-select` to make the input customizable

docs/components/input.md

@@ -119,4 +119,45 @@ Add descriptive help text to an input with the `help-text` slot.
 </sl-input>
 ```
 
+### Inputs with Dropdowns
+
+Dropdowns can be used in the `prefix` or `suffix` slot to make inputs more versatile. Make sure to use the `hoist` prop so the dropdown breaks out of the input's overflow.
+
+```html preview
+<div class="input-dropdowns">
+  <sl-input type="tel" label="Phone">
+    <sl-icon slot="prefix" name="telephone"></sl-icon>
+    <sl-dropdown slot="suffix" placement="bottom-end" hoist>
+      <sl-button slot="trigger" caret type="text" size="small">Home</sl-button>
+      <sl-menu>
+        <sl-menu-item checked>Home</sl-menu-item>
+        <sl-menu-item>Mobile</sl-menu-item>
+        <sl-menu-item>Work</sl-menu-item>
+      </sl-menu>
+    </sl-dropdown>
+    <div slot="help-text">
+      Please enter a phone number where we can reach you.
+    </div>
+  </sl-input>
+</div>
+
+<script>
+  const container = document.querySelector('.input-dropdowns');
+  const dropdown = container.querySelector('sl-dropdown');
+  const trigger = dropdown.querySelector('sl-button');
+
+  dropdown.addEventListener('slSelect', event => {
+    const selectedItem = event.detail.item;
+    trigger.textContent = selectedItem.textContent;
+    [...dropdown.querySelectorAll('sl-menu-item')].map(item => item.checked = item === selectedItem);
+  });
+</script>
+
+<style>
+  .input-dropdowns sl-dropdown {
+    margin-right: .25rem;
+  }
+</style>
+```
+
 [component-metadata:sl-input]

src/components/input/input.scss

@@ -108,7 +108,11 @@
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
-  color: var(--sl-input-icon-color);
+  cursor: default;
+
+  ::slotted(sl-icon) {
+    color: var(--sl-input-icon-color);
+  }
 }
 
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

src/components/input/input.tsx

@@ -142,7 +142,6 @@ export class Input {
     this.handleBlur = this.handleBlur.bind(this);
     this.handleFocus = this.handleFocus.bind(this);
     this.handleClearClick = this.handleClearClick.bind(this);
-    this.handleMouseDown = this.handleMouseDown.bind(this);
     this.handlePasswordToggle = this.handlePasswordToggle.bind(this);
   }
 
@@ -238,15 +237,6 @@ export class Input {
     event.stopPropagation();
   }
 
-  handleMouseDown(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-
-    if (target !== this.input) {
-      event.preventDefault();
-      this.input.focus();
-    }
-  }
-
   handlePasswordToggle() {
     this.isPasswordVisible = !this.isPasswordVisible;
   }
@@ -292,7 +282,6 @@ export class Input {
             'input--empty': this.value?.length === 0,
             'input--invalid': this.invalid
           }}
-          onMouseDown={this.handleMouseDown}
         >
           <span part="prefix" class="input__prefix">
             <slot name="prefix" />