4

I cannot select the options being displayed from MUI's autocomplete component. The reason I think is that I am using renderOption. I want to display the image along the title in the options of my component and without using renderOption, I have not been able to do that. But, doing so (using renderOption), I cannot select any option.

import React, { useState } from 'react';
import { fetchSearchAnimeEndpoint } from '../../redux';
import { connect } from 'react-redux';
import { debounce } from 'lodash';

import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
import CircularProgress from '@mui/material/CircularProgress';

import './searchbar.css';

const SearchBar = (props: any) => {
  const [openPopper, setOpenPopper] = useState(false);
  const [inputValue, setInputValue] = useState('');

  const { anime } = props;

  const handleKeyPress = debounce(
    (event: React.FormEvent<HTMLInputElement>) => {
      const value = (event.target as HTMLInputElement).value;

      props.fetchSearchAnime(value);
    },
    700
  );

  return (
    <div>
      
     

  {/* 
Cannot select the options being displayed either by clicking or using keyboard
  Want to display the title on the textfield by selecting desired option */}


      <Autocomplete
        id="combo-box-demo"
        options={anime.results.data ? anime.results.data : []}
        style={{ width: 300, marginTop: '2rem' }}
        isOptionEqualToValue={(option, value) => option.title === value.title}
        getOptionLabel={(option: any) => option.title}
        renderOption={(option: any, optionAnime) => {
          return (
            <h4 key={optionAnime.mal_id} className="search-container">
              <img
                className="search-image"
                alt="anime"
                src={optionAnime.image_url}
              />
              {optionAnime.title}
            </h4>
          );
        }}
        renderInput={(params) => (
          <TextField
            onInput={(e) => {
              if ((e.target as HTMLInputElement).value.length >= 3) {
                setOpenPopper(true);
              } else {
                setOpenPopper(false);
              }
              return handleKeyPress(e);
            }}
            {...params}
            label="Anime"
          />
        )}
        open={openPopper}
        onClose={() => {
          setOpenPopper(false);
        }}
      />
    </div>
  );
};

const mapStateToProps = (state: any) => {
  return {
    anime: state,
  };
};

const mapDispatchToProps = (dispatch: any) => {
  return {
    fetchSearchAnime: (name: string) =>
      dispatch(fetchSearchAnimeEndpoint(name)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

I am getting the options and just cannot select them. What I want is to select them by clicking on them or using the keyboard and get the title value on the textfield

cannot select the options either by keyboard or mouse

Abdullah Ch
  • 1,678
  • 1
  • 13
  • 31

1 Answers1

0

Hey so they changed the renderInput function as it now takes props and options

so for this example

<TextField
        onInput={(e) => {
          if ((e.target as HTMLInputElement).value.length >= 3) {
            setOpenPopper(true);
          } else {
            setOpenPopper(false);
          }
          return handleKeyPress(e);
        }}
        {...props}
        label="Anime"
      />
    )}
    open={openPopper}
    onClose={() => {
      setOpenPopper(false);
    }}
  />

for more info on the problem, theres an example on github: https://github.com/mui/material-ui/issues/29943

LouisDVL
  • 1