Troubleshooting hover conflicts and enter events in ReactJS autocomplete functionality

Question

Troubleshooting hover conflicts and enter events in ReactJS autocomplete functionality

Trying to enhance my learning, I am currently working on developing an autocomplete feature. Referencing this example for guidance:

https://codesandbox.io/s/8lyp733pj0.

Encountering two main issues with this implementation:

1.) Conflict between mouse hover and keypress. When using the keyboard to navigate through the list, the active item gets highlighted. Simultaneously, if using the mouse, another item may get highlighted resulting in multiple selections.

2.) Upon selecting an item by pressing enter, the input field correctly fills with the selected text. However, upon pressing enter again, it changes the text back to the index 0 item instead.

Seeking assistance in resolving these dilemmas. Already experimented with hover and focus in CSS but without achieving desired results.

Potential solutions under consideration:

Disabling mouse events when a keyboard is being used, and vice versa.
Considering removing this.setState({activeSuggestion: 0}) for the enter event.

Appreciate any help provided - grasping the nuances of state management with React is proving to be quite challenging.

css reactjs autocomplete

Answer 1

Answer №1

The function onKeyDown is successfully updating the value of activeSuggestion. It would be beneficial to incorporate a scroll feature in the select element when activeSuggestion is not visible.
In my view, it is necessary to update the value of activeSuggestion using the onMouseEnter function.
Remember to eliminate line 32 from styles.css which targets .suggestions li:hover when making these changes.

It's important that only the element with .suggestion-active has the active styles and not the ones that are hovered over. The goal is for the onMouseEnter function to update the value of activeSuggestion.

Here is the code snippet:

// Autocomplete.jsx

// Add this after function onKeyDown on line 84:
  onMouseEnter = e => {
    try {
      e.persist();
      const currentIndex = parseInt(e.target.dataset.index, 10);
      this.setState({ activeSuggestion: currentIndex });
    } catch (reason) {
      console.error(reason);
    }
  }


// Then, define const onMouseEnter after the render() method:
  render() {
    const {
      onChange,
      onClick,
      onKeyDown,
      onMouseEnter,
      state: {
        activeSuggestion,
        filteredSuggestions,
        showSuggestions,
        userInput
      }
    } = this;

// In the li nodes (line 123), include props onMouseEnter and data-index like so:
        <li
          className={className}
          key={suggestion}
          onClick={onClick}
          onMouseEnter={onMouseEnter}
          data-index={index}
        >
          {suggestion}
        </li>

Don't forget to remove line 32 from styles.css targeting .suggestions li:hover.

I hope this explanation is useful.

Answer 2

The function onKeyDown is successfully updating the value of activeSuggestion. It would be beneficial to incorporate a scroll feature in the select element when activeSuggestion is not visible.
In my view, it is necessary to update the value of activeSuggestion using the onMouseEnter function.
Remember to eliminate line 32 from styles.css which targets .suggestions li:hover when making these changes.

It's important that only the element with .suggestion-active has the active styles and not the ones that are hovered over. The goal is for the onMouseEnter function to update the value of activeSuggestion.

Here is the code snippet:

// Autocomplete.jsx

// Add this after function onKeyDown on line 84:
  onMouseEnter = e => {
    try {
      e.persist();
      const currentIndex = parseInt(e.target.dataset.index, 10);
      this.setState({ activeSuggestion: currentIndex });
    } catch (reason) {
      console.error(reason);
    }
  }


// Then, define const onMouseEnter after the render() method:
  render() {
    const {
      onChange,
      onClick,
      onKeyDown,
      onMouseEnter,
      state: {
        activeSuggestion,
        filteredSuggestions,
        showSuggestions,
        userInput
      }
    } = this;

// In the li nodes (line 123), include props onMouseEnter and data-index like so:
        <li
          className={className}
          key={suggestion}
          onClick={onClick}
          onMouseEnter={onMouseEnter}
          data-index={index}
        >
          {suggestion}
        </li>

Don't forget to remove line 32 from styles.css targeting .suggestions li:hover.

I hope this explanation is useful.

Troubleshooting hover conflicts and enter events in ReactJS autocomplete functionality

Answer №1

Similar questions

Enhance your text with personalized logos using autocomplete

The error message "Cannot read property 'push' of undefined" is displayed when trying to access this.props.history.push

JavaScript situation

The rangeslider thumb is positioned incorrectly on the track in the Firefox browser. How can this issue be resolved? Please see the code provided

Resetting several sticky titles after displaying and hiding elements

How can I create a reverse animation using CSS?

styling CSS to achieve equal heights for div alignments

A step-by-step guide on masking (proxying) a WebSocket port

Pressing the icon will trigger a top-sliding dropdown mobile menu to appear

Yep, implementing conditional logic with the `when` keyword and radio buttons

Adjusting the height of the v-select component in Vuetify 3: A step-by-step guide

Design featuring a combination of vertical columns and a fixed image placed in

Obtaining HTML data with ajax within a WordPress post

How can I make Bootstrap Carousel slides transition as I scroll?

Ways to create a smooth transition in element height without a known fixed target height

What is the best way to control the scroll position of a React Material-UI component when clicking a button?

Using CSS to create a background-clip effect on text along with a smooth opacity

Characters with accents appear larger compared to regular letters

Struggling to make Typescript recognize the css prop (emotion) when styling Material-UI components

Utilizing the `sx` prop to choose a child component in Material-UI: a step-by