Replicate border focus behavior lightning input

csslightninglightning-inputfieldlightning-web-componentslightninginput

I'm using this repository because I needed a multi select combobox like this and works fine except the input is not a lightning-input so it doesn't have the blue border focus like this:
enter image description here

https://github.com/svierk/awesome-lwc-collection/tree/main/force-app/main/default/lwc/multiSelectCombobox

Right now the input border focus is black like standard, I tried to override with this css class, but it just become a very tiny blue border and doesn't have the shadow:
enter image description here

.multi-select-combobox__input:focus {
  outline: 0;
  border-color: rgb(21, 137, 238);
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 3px #0070d2;
}

Best Answer

I spent some time trying to figure this out. It's actually mostly because of this rule:

.multi-select-combobox__dropdown {
   overflow-y: auto;
}

Change this to overflow-y: visible;

I'm not entirely sure why this is happening, but I think it's related to the amount of space surrounding each element.

Also, you'll want to set slds-has-focus on your input to prevent it losing focus:

<input class="slds-combobox__input 
              multi-select-combobox__input 
              multi-select-combobox__dropdown 
              slds-has-focus" >

You might want to do with this with a click handler on select or input.

You'll still want this rule, I think:

.slds-combobox__input:focus, .slds-combobox__input.slds-has-focus {
  border-color: var(--slds-g-color-brand-base-60, var(--lwc-colorBorderInputActive,rgb(27, 150, 255)));
  box-shadow: var(--lwc-shadowButtonFocus,0 0 3px #0176d3);
}

I found a writeup about this here. They solved by adding negative margins and padding, but I found just changing auto to scroll worked.

Related Topic