Currently i am using react, styled-Componets, react-icons

I'm making a select dropdown component.

I want to take a console log when items are clicked, but it doesn't work.

Perhaps because of conditional rendering, the element disappears

before the on-click is called. Is there a better way?

Can anyone help?

Below is the code i wrote.

import React, { useState } from 'react';

import { AiFillCaretDown } from 'react-icons/ai';
import styled from 'styled-components';
import Input from './Input';

const Autocomplete = styled.div`
  position: relative;
  display: flex;

  .icon {
    margin-left: -28px;
    align-self: center;
    width: 24px;
    height: 24px;
  }
`;

const Dropdown = styled.div`
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  background-color: #fff;
`;

const SearchResults = styled.ul`
  margin: 0;
  padding: 0;
  list-style: none;
`;

const Items = styled.li`
  padding: 0.75rem 1rem;
  cursor: pointer;
`;

const OPTION = [
  'Inside Out',
  'John Wick',
  'Jurassic World',
  'The Lord of the Rings',
  'Pacific Rim',
  'Pirates of the Caribbean',
  'Planet of the Apes',
  'Saw',
  'Sicario',
  'Zombies',
];

const SerachSelect = () => {
  const [results, setResults] = useState(OPTION);
  const [dropdownVisible, setDropdownVisible] = useState(false);

  const filterMethod = (options, query) => {
    return options.filter((option) =>
      option.toLowerCase().includes(query.toLowerCase())
    );
  };

  const searchList = (event) => {
    const findResults = filterMethod(OPTION, event.target.value);
    setResults(findResults);
  };

  const showDropdown = () => {
    setDropdownVisible(true);
  };

  const hideDropdown = () => {
    setDropdownVisible(false);
  };

  return (
    <Autocomplete>
      <input
        type="text"
        placeholder="Type to search list"
        onChange={searchList}
        onFocus={() => showDropdown()}
        onBlur={() => hideDropdown()}
      />
      <AiFillCaretDown className="icon" size={20} />
      {dropdownVisible && (
        <Dropdown>
          <SearchResults>
            {results.map((result) => (
              <Items
                key={result}
                onClick={() => {
                  //help me...
                  console.log(result);
                }}
              >
                {result}
              </Items>
            ))}
          </SearchResults>
        </Dropdown>
      )}
    </Autocomplete>
  );
};

export default SerachSelect;

CodePudding user response：

You can hide the dropdown after an item is clicked instead of using onBlur handler. Here is a solution

return (
    <Autocomplete>
      <input
        type="text"
        placeholder="Type to search list"
        onChange={searchList}
        onFocus={() => showDropdown()}
      />
      <AiFillCaretDown className="icon" size={20} />
      {dropdownVisible && (
        <Dropdown>
          <SearchResults>
            {results.map((result) => (
              <Items
                key={result}
                onClick={() => {
                  //help me...
                  console.log(result);
                  hideDropdown();
                }}
              >
                {result}
              </Items>
            ))}
          </SearchResults>
        </Dropdown>
      )}
    </Autocomplete>
  );

CodePudding user response：

Your Items component should take onClick prop like this;

const Items = (props) => {
  return <div onClick={props.onClick}>{props.children}</div>;
}