Skip to content

fix: faulty re-render on multiselect search

Daniel Schmidt requested to merge instantnoodl/multiselect-search-fix into master

Problem: If you use a dropdown select with search the blur event will result in a unneeded re-draw, which results in the user having to click a element twice before it registers.

Screen_Recording_2024-02-20_at_13.48.29

Funny enough the code of x-dropdown-selection already contains a fix for this. See the disable-blur-submit.

  protected _search(): TemplateResult<1> | symbol {
    return this.search
      ? html`
          <x-input
            ${css({ paddingTop: this.spacing.sm })}
            placeholder="Suchen..."
            placeholder-mode="hide"
            @value-changed=${e => this._searchString.next(e.detail.value)}
            disable-blur-submit
            @mousedown=${() => (this._ignoreNextBlur = true)}
          ></x-input>
        `
      : nothing;
  }

BUT there is no disable-blur-submit in x-plain-input. Maybe it was accidentally removed at some point? I added it back and now the re-draw is gone and it works as expected.

Merge request reports