add errors, listbox scrolling, and loading indicator to UI

[no-stack-dub-sack]

Hi @pozil, awesome component! It's a shame Lightning doesn't provide this natively, but you've done an awesome job, and I'm surprised the repo doesn't have more stars!

I've been working this into one of my developer orgs just to play around with it, and have some suggestions for minor improvements if you're willing to accept a PR. The notable changes I've made so far are:

• Added a very small spinner in place of the search icon when the component is in a loading state (with a 300ms delay so that there isn't any flickering in the event of a very quick search)
• Added an errors attribute of type object[] which accepts and array of error objects similar to ui:inputSelect and other components and iterates over the result showing the errors with slds's error styling. When the component is in an error state, it also modifies its style to have a red border (to be consistent with the ui namespaced components when used alongside each other). For example:

• To help manage errors, I've also exposed a onSelection event that can be passed in from the consumer component so the user can determine how and when to clear errors (this could perhaps be made more flexible, but I think it's a good start).
• Lastly, in considering long result sets, I've also exposed an attribute called scrollAfterNItems which uses slds classes to force scrolling on the list box after 5, 7, or 10 items. It can be set to null to disable overflow scrolling.

Of course, this all adds a bit more code to the component, but I think it improves its overall reusabiilty and flexibility. If you're interested, I'd be happy to put this all together into a PR and send it your way for review and discussion.

Thanks again!

[quin-srp]

👍 on an awesome job, works great so far and we are testing this as well. Would love to see the ability to tab or use arrows to navigate through the search results. Any chance that's in the roadmap?

[no-stack-dub-sack]

@quin-srp are you testing it just by using it and seeing how it performs or are you also writing unit tests? If the latter, I would love it if you'd be willing to share some! I'm unsure what the best approach is in certain cases, but if there's any chance of using this in prod, I'd need to get some good coverage on it.

[pozil]

@no-stack-dub-sack thanks for the feedback and great suggestions. Please open a PR so that we work on including those features.

@quin-srp I suggest that you open a new issue (it's more a feature request) for shortcuts and we can continue the discussion there.

@all I agree regarding the tests. I will log a feature request for Lightning tests. We probabbly need to set up LTS and a CI environment.

[no-stack-dub-sack]

@pozil may take me a couple of days to pull this together, but I will follow up soon. I also recently implemented arrow key navigation in another similar component I am designing, so to @quin-srp's point, perhaps that could be next. I can open an issue for that at some point, once I work through this.