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:
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:
.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:
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:You might want to do with this with a click handler on select or input.
You'll still want this rule, I think:
I found a writeup about this here. They solved by adding negative margins and padding, but I found just changing
auto
toscroll
worked.