Design a dynamic dropdown feature that is triggered when the chip element is clicked within the TextField component

Question

Design a dynamic dropdown feature that is triggered when the chip element is clicked within the TextField component

Currently, I am facing difficulties in implementing a customized dropdown feature that is not available as a built-in option in Material UI. All the components used in this project are from Material UI. Specifically, I have a TextField with a Chip for the End Adornment.

The desired outcome is for the user to be able to click on the chip and trigger a dropdown menu under the TextField where they can choose a vehicle type. Unfortunately, it seems like there is no direct way to achieve this using Material UI components. Are there any suggestions or alternatives that could help me accomplish this task? Your input would be greatly appreciated. Thank you!

https://i.stack.imgur.com/81Gk5.png

javascript jquery css reactjs material-ui

Answer 1

Answer №1

To implement this functionality, follow the code below:

Link to code implementation

import { useState } from "react";
import { TextField, Chip, InputAdornment, Menu, MenuItem } from "@mui/material";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";

export default function App() {
  const [selectedItem, setSelectedItem] = useState("Jeep");
  return (
    <TextField
      label="With normal TextField"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <ChipDropDown
              items={["Jeep", "Volvo", "Ferrari"]}
              selectedItem={selectedItem}
              onChanged={setSelectedItem}
            />
          </InputAdornment>
        )
      }}
      variant="filled"
    />
  );
}

const ChipDropDown = ({ items, selectedItem, onChanged }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClick = (item) => {
    onChanged(item);
    setAnchorEl(null);
  };
  return (
    <div>
      <Chip
        label={selectedItem}
        onClick={(e) => setAnchorEl(e.currentTarget)}
        onDelete={(e) => e}
        deleteIcon={<KeyboardArrowDown />}
      />
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={(e) => setAnchorEl(null)}
      >
        {items.map((item) => (
          <MenuItem key={item} onClick={(e) => handleClick(item)}>
            {item}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
};

Answer 2

To implement this functionality, follow the code below:

Link to code implementation

import { useState } from "react";
import { TextField, Chip, InputAdornment, Menu, MenuItem } from "@mui/material";
import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";

export default function App() {
  const [selectedItem, setSelectedItem] = useState("Jeep");
  return (
    <TextField
      label="With normal TextField"
      InputProps={{
        endAdornment: (
          <InputAdornment position="end">
            <ChipDropDown
              items={["Jeep", "Volvo", "Ferrari"]}
              selectedItem={selectedItem}
              onChanged={setSelectedItem}
            />
          </InputAdornment>
        )
      }}
      variant="filled"
    />
  );
}

const ChipDropDown = ({ items, selectedItem, onChanged }) => {
  const [anchorEl, setAnchorEl] = useState(null);
  const handleClick = (item) => {
    onChanged(item);
    setAnchorEl(null);
  };
  return (
    <div>
      <Chip
        label={selectedItem}
        onClick={(e) => setAnchorEl(e.currentTarget)}
        onDelete={(e) => e}
        deleteIcon={<KeyboardArrowDown />}
      />
      <Menu
        anchorEl={anchorEl}
        open={Boolean(anchorEl)}
        onClose={(e) => setAnchorEl(null)}
      >
        {items.map((item) => (
          <MenuItem key={item} onClick={(e) => handleClick(item)}>
            {item}
          </MenuItem>
        ))}
      </Menu>
    </div>
  );
};

Design a dynamic dropdown feature that is triggered when the chip element is clicked within the TextField component

Answer №1

Similar questions

Exploring the method to retrieve a dynamically added property in Typescript

I am looking to place two HTML buttons next to each other on the same line

The "gatsby-plugin-sharp" plugin was not found during the execution of the gatsby develop command

What is the best way to extract the text from a <div> tag and show it in a different div when clicked on using ng click in AngularJS?

Instructions for extracting and storing values from a JSON response into an array

What is the best way to retrieve a value from a form and incorporate it into a controller?

Tips for customizing the font color in Material UI Typography

Is there a way to set up gulp without relying on npm when using shared hosting?

Is it considered good practice in the Redux framework to modify data within an action?

What is the method for storing API status JSON in the state?

Unable to generate StumbleUpon traffic for a URL through AJAX due to the API returning text/plain

Utilize NgRepeat to access an unidentified array in AngularJS

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Encountered an issue with the Mongoose Schema method: The model method is not recognized as a

Manage and modify data values

Is there a way to use JQuery to dynamically generate a new select box with specific options?

What is the method for ensuring text remains within a square while it is being relocated?

What is the process for resolving arguments in UI-Router's resolve function?

Convert a web page with embedded images using Base64 strings into a PDF file using JavaScript

The Glyphicon icon fails to appear on the initial page load and only shows up after refreshing the