react-autosuggest icon indicating copy to clipboard operation
react-autosuggest copied to clipboard

Tricky to support cmd-clicking to open a link in a new window.

Open tmcw opened this issue 6 years ago • 1 comments

Are you reporting a bug?

Codepen: https://codepen.io/tmcw/pen/bJxJPz

  • Provide the steps to reproduce the issue, e.g.:

    1. Focus on the input field
    2. Type c, and wait for suggestions to appear
    3. Cmd-click a suggestion

    Observed behaviour: Suggestions close

    Expected behaviour: Suggestions should stay open

Are you making a feature request?

  • Please describe your use case from user journey point of view, e.g.:

In our application (Observable), we use react-autosuggest for the autocompleting search feature. Search results are links - in our case, react-router <Link> components, and in the codepen example, <a> elements.

All is good so far: we use react-autosuggest's onSuggestionSelected to support keyboard navigation with history.push, for normal clicks, we use method to let the link do its thing, which can include opening in a new tab, if the user has cmd held down (on Mac). However, unlike normal clicks, cmd-clicks both open the search suggestion in a new tab and they close the react-autosuggest UI.

We'd like to keep the react-autosuggest UI open in this case - essentially, if it's a mouse interaction, it shouldn't auto-close the search UI. If you simply click, the navigation opens a new page with the UI closed. If you cmd-click, it opens a new background tab, and you might want to click on another result to open a bunch of tabs.

  • If you have ideas how to extend the Autosuggest API to support your new feature, please share!

This is admittedly a few levels deep into react-autosuggest and particular to how we use it. Possibly react-autowhatever is the right level of abstraction instead?

What we're seeing is that this behavior is really hard to achieve with off-the-shelf react-autosuggest because we can't properly intercept the events and our code conflicts with the this.justClickedOnSuggestionContainer boolean.

  • If you know any examples online that already implement such functionality, please share a link.

The GitHub search bar on the top has essentially the behavior we want: you can cmd-click on a suggestion without closing the UI.

tmcw avatar Apr 23 '19 17:04 tmcw

@tmcw any luck with this? We're after the same thing.

aidanlister avatar Jan 30 '21 06:01 aidanlister