Skip to content

Selectize element isFocused is true after $control_input gets blurred #1926

@YoYuUm

Description

@YoYuUm

I did:

  • Search for if my issue has already been submitted
  • Make sure I'm reporting something precise that needs to be fixed
  • Give my issue a descriptive and concise title
  • Create a minimal working example on JsFiddle or Codepen
    (or gave a link to a demo on the Selectize docs)
  • Indicate precise steps to reproduce in numbers and the result,
    like below

After this commit that fixes an issue with modals , selectize component has stopped tracking $control_input blur events, so it keeps the "isFocused" state even when it is not focused anymore. That causes some visual errors as long as some other issues

Issue 1: Selectize input doesn't loose focus styles when tabbing through inputs.

Steps to reproduce:

  1. Go to Demo page https://selectize.dev/docs/demos/lock
  2. Click on Bootstrap 5, in order to get focused styles around the input field
  3. Click on first select input
  4. Press tab key to navigate to next input.

Expected result:
First input looses focus styles while second input shows them

Actual result:
Both inputs show focus styles.

Issue 2: When clicking on the dropdown of a multiple select, input loses focus and it doesn't gain it back because onFocus callback checks if isFocused is true before setting it ( which it is ), so you can't search using the input

Steps to reproduce:

  1. Go to Demo page https://selectize.dev/docs/demos/opt-groups
  2. Type "B" in the input
  3. Select "Bolts" in the dropdown using the mouse click
  4. Type "C"

Expected result:
I expect the input to be focused so when I type the "C" it search for an option and shows it in the dropdown.

Actual result:
When I type "C" nothing happens because the input is not focused. When I click on the input to focus it it doesn't gain focus either, so the only way I can use the search again is clicking away from the drowdown menu (close it) and focusing the input again.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions