mi6 / ic-ui-kit

Intelligence Community UI Kit (based on StencilJS)
MIT License
19 stars 23 forks source link

Select: Unable to leave loading state without re-render? #2003

Open GCHQ-Developer-299 opened 2 weeks ago

GCHQ-Developer-299 commented 2 weeks ago

Summary of the bug

Discovered whileintroducing Playground to ic-select

It seems that the loadingHandler function doesn't consider the loading prop changing to false

  @Watch("loading")
  loadingHandler(newValue: boolean): void {
    newValue && this.triggerLoading();
  }

Additionally, updating the loadingLabel prop doesn't change the loading text until loading is toggled off and back on.

🪜 How to reproduce

Tell us the steps to reproduce the problem:

  1. Go to the React Playground storybook in Select (single)
  2. click to expand the Select
  3. in the controls, toggle 'loading' to true
  4. you'll see the select switch to a loading state
  5. Toggle 'loading' to false
  6. The select won't show results, it remains loading. You'll find that expanding and collapsing the select doesn't fix it

📸 Screenshots or code

Screenshot 2024-06-14 at 15 37 35

🧐 Expected behaviour

Switching loading to false should show results / no results. Also, in the Playgrounds (single/searchable select in React, multi-select in Canary) the loadingLabel should update loading text whenever the prop is changed