Does anyone know how to create a Select component with a Search input as the first option in the dropdown list? Similar to the following image: https://i.sstatic.net/qaWFH.png
The issue is that the Search component behaves like a normal text input. I'm struggling to make it focusable. Any help would be appreciated. Thank you.
The reason for this issue is that the MenuItem is directly nested within the Select component, behaving similarly to what is described in the documentation for a Selected menu. When the Menu (or Select) is opened, focus automatically shifts to the selected MenuItem, causing the TextField to lose focus, despite having an autoFocus attribute attached.
To address this, one solution involves using the useRef hook on the TextField element and manually calling the focus() method when the Select opens:
const inputRef = useRef(null);
...
<Select onAnimationEnd={() -> inputRef.current.focus()} ... >
...
<TextField ref={inputRef} ... />
...
</Select>
However, there's a caveat to consider!
The issue arises when you open the select menu and shift focus to the input field as expected. If you enter search text that filters out the currently selected value and then remove that text using backspace until the initially selected item reappears, the focus will automatically switch from the input field back to the selected option. This behavior may seem plausible initially but it leads to a less than ideal user experience and lacks the stable behavior we desire.
Your question lacks clarity without any accompanying code or detailed explanation. Nonetheless, I perceive it to be valuable as I too was seeking a similar resolution: a Searchable Select MUI Component with optimal user experience. Hence, I present my interpretation of your query and offer a potential solution.
Here is a link to a CodeSandbox showcasing my implemented solution. The critical components are elucidated in the code comments and summarized below:
MenuProps={{ autoFocus: false }} attribute to the Select component and the autoFocus attribute to the TextField component.TextField within a ListSubheader to prevent it from being recognized as a selectable item in the menu, allowing users to interact with the search input sans triggering any selections.renderValue function has been included to prevent rendering an empty string in the Select's value field if the search text eliminates the currently selected option.TextField has been disabled using the onKeyDown function to avoid automatic selection of items while typing, which is the default behavior of the Select.If you're looking for a versatile component, the MUI Autocomplete might be just what you need [https://mui.com/components/autocomplete/](MUI Autocomplete)
The Auto Complete feature is part of the MUI Library and offers similar functionality to the Select option. It also includes a search option and other features that enhance the developer experience. Take a look at this short example using the Autocomplete Component:
import * as React from 'react';
import TextField from '@mui/material/TextField';
import Autocomplete from '@mui/material/Autocomplete';
export default function ComboBox() {
return (
<Autocomplete
disablePortal
id="combo-box-demo"
options={top100Films}
sx={{ width: 300 }}
renderInput={(params) => <TextField {...params} label="Movie" />}
/>
);
}
// List of top 100 films rated by IMDb users. Source: http://www.imdb.com/chart/top
const top100Films = [
{ label: 'The Shawshank Redemption', year: 1994 },
{ label: 'The Godfather', year: 1972 },
// Additional film entries...
];
Include the MenuProps={{ autoFocus: false }} parameter within Select Mui Components
<Select MenuProps={{ autoFocus: false }} ...> .......</Select>
After watching a video by Dan Abramov, I decided to optimize my component by creating a custom Hook called useFormInput. This hook handles the state and onChange functionality for all of my form input fields. Everything was working perfectly until I neede ...
Can nodes os.cpus() module be utilized in a React environment? I am exploring ways to obtain real-time CPU usage updates from Node for a project I am currently engaged in. While I have some experience with React, I am fairly new to Node development, making ...
Is there a way to stretch one of the three SVGs in a block without any space between them? The first and last SVG should always be 100px width, while the second SVG should have varying widths like 100px, 200px, or 1000px but must be adjacent to each other. ...
I have been working on creating a higher order component to verify the authentication status of a user. Currently, I am using React 15.5.4 and @types/react 15.0.21, and below is a simplified version of my code: import * as React from 'react'; i ...
componentWillReceiveProps(nextProps) { if (nextProps.group.data !== this.props.group.data) { console.log(true); } } the group data object originates from const mapStateToProps = (state, props) => { return { group: { ...
Whenever I utilize the autoformat feature in my VS Code editor, it adds spaces before curly brackets in my code: Change this: <Button onClick={this.callMyFunc.bind(this, screenSet.index)}>Add</Button> To this: <Button onClick={this.callM ...
I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...
I've been applying the following CSS: .text_style3{ font:normal 8px Helvetica; color:#f7922c; } I'm trying to decrease the size further, but anything below 10px doesn't seem to work. I've attempted using 7px, 6px, 5px, etc., w ...
I have a live scoreboard on my website that pulls information from another site, making the content dynamic. I want to enhance the display by replacing certain elements in the table with images, such as displaying logos instead of club names. However, my k ...
In my project, there is an angular component named currency-selector with its dedicated css file defining the styling as shown below: .currency-select { position: absolute; top: 5px; right: 80px; z-index: 1000000; color: #DD642A; f ...
Two php files and a js file are involved in this scenario. The issue at hand is that when the div is clicked, it navigates to a new page with an appended # to the URL, causing it to scroll to the specified comment ID. However, instead of scrolling to the c ...
I have tables set up in my Rails 4 App with the ZURB Foundation 5 framework. The problem lies with the mobile version of the table. It works fine on browsers and tablets, but on mobile phones, it shows the first column twice before scrolling through the r ...
import { setCookies, removeCookies } from "cookies-next"; import { useRouter } from "next/router"; import { useEffect } from "react"; const { URL } = process.env; export const getServerSideProps = async (context) => { co ...
This code snippet is running into an issue with console.log: It seems to be printing the previous state value because set operates asynchronously. const SomeComponent = () => { const [count, set] = useState(0); const setFunction = () => { co ...
I am encountering an issue with obtaining the login credentials from the object. Although the code snippet below functions perfectly well with other forms. SignIn.js export default function SignIn(props) { const [state, setState] = useState({ userna ...
After completing my website and testing it across different browsers, I noticed an issue with IE. The contact div and navigation shift around the page in this browser specifically. Can anyone help me out with some code to fix this problem? Link to live ex ...
I am attempting to import an SVG file in my NEXT.js project using the babel-plugin-inline-react-svg. I have followed all the instructions and everything is functioning perfectly. // .babelrc { "presets": ["next/babel"], "plugin ...
Hey there, I am currently working on a project where I have multiple checkboxes being looped on the left side. Based on the checked checkboxes, I am pushing the status and value of those checkboxes to the right side and displaying them as checkboxes. How ...
Is there a way to use flex classes in the example below to ensure columns 3 and 4 have the same height as columns 1 and 2 without using Javascript? Specifically, how can I adjust the height of all columns automatically to match the tallest column's c ...
I have a container with a padding of 5 (p-5) applied to it. However, I am looking for a way to automatically remove the padding when the screen size is small, without adding more CSS rules. Is there a solution using only bootstrap classes? <div class= ...