1

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;
}
1
  • I've found the real reason - check my updated answer. Commented Jun 6, 2023 at 5:20

1 Answer 1

1

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.

8
  • Unfortunately this didn't work, the border became black :\
    – Alexia
    Commented Jun 6, 2023 at 1:09
  • 1
    That solve :) The behavior was having focus even when was not clicked, and when was clicked the border becam black, so I changed a fell things, I remove the slds-has-focus and in the css I add the outline: 0; So now it has the same behavior that the a lightning input
    – Alexia
    Commented Jun 6, 2023 at 13:33
  • Thank u!!! :)))
    – Alexia
    Commented Jun 6, 2023 at 13:33
  • It was quite a puzzle to solve, but I really wanted to figure it out! I have my own components that also suffer from this, but I hadn't bothered to worry about them before. Commented Jun 6, 2023 at 18:32
  • Thank you very much! I'm very detal-oriented, so it was something that was bothered me. I can share my code if you would like, hope you find a solution too :)
    – Alexia
    Commented Jun 10, 2023 at 18:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .