zowyechi/bwa-u4-feature-request

bwa-u4-feature-request's Issues

Objective

To create a user friendly app and ease of usability for the user.

This should be a short statement describing what the feature should actually do.

Background

Sites that uses a search feature like, Google, uses the enter button as a trigger of a search process, because of this, intuitively users will expect this basic feature as the norm.

True. 👌

Technical design

The functionality of the SearchBar component should be expanded to accommodate a more optimal user experience. Currently if a Song, Album, or Artist is entered in the input box, the user has to click the Search button to render the SearchResults component. So the user has to remove his hands off of the keyboard to click his mouse or other input device. The SearchBar component should be extended to accept the Enter key, as well as the Tab key to change focus on the SEARCH button, so that search criteria can be entered in succession without having to remove his hands from the keyboard.

This is not a technical design. None of this explains how you'd actually implement your feature.

A function should be created in the SearchBar component to handle onKeyPress, and that function should check if the key pressed was the 'Enter' key, or the 'Tab' key. If the 'Enter' key were pressed, the search() function should be called. If the 'Tab' key was pressed, focus should from from the input box to the SEARCH button.

So, a second event handler that does the same thing as the existing handler? This should work, but it seems repetitive and if you propose this solution for every single form that needs submission, it could add a lot of unnecessary bloat to your codebase.

Summary

Needs Improvement

Your suggested implementation might work but it is not an optimal solution. It's pretty easy to reach for this solution, especially when you've just spent so much time learning about React and all the wonderful things it can do for your web development projects. That being said, whenever you think of a feature you should first conduct adequate research so that you can make a more informed decision based on other programmers' experiences. This will allow you to make a more meaningful analysis in your technical design and caveat sections.

The simplest way to implement this feature does not require any React skill at all, not even any JavaScript! And, in fact, throwing a second event listener/event handler pair will unnecessarily bloat your codebase as you add more and more forms to your application. It's not ideal for so much of your codebase to be dedicated almost exclusively to... duplicating form submission logic. At the very least, this is a tradeoff that you should consider in your request.

A quick Google would demonstrate how you might implement this with just HTML. All you really need is to change your div element to a form, use a single onSubmit event listener, and change the a element to an input element of type="submit". Try it out!

Caveats

User experience is important for any digital product. This drives the traffic from complex to simple sites. Developing a better user experience site would draw more ‘like’ and ‘hits’ compared to a product that provides similar content.

This isn't a caveat.

What are the technical challenges you might encounter in developing your feature? What are the shortcomings or weaknesses of the proposed feature or your implementation? What might be a better solution?

These are questions that should be considered when designing and proposing a feature or application.