在 Material UI Select 组件中搜索输入作为选项

Question

我需要使用搜索输入作为下拉列表中的第一个选项来创建选择组件。像这样的事情：

主要问题是搜索组件在输入时表现正常。我不知道如何让它聚焦。谢谢。

Answer 1

问题解释

发生这种情况是因为MenuItem是该组件的直接子级Select。它的作用方式与选定菜单文档中描述的相同。您可以看到，当Menu（或在我们的例子中Select）打开时，焦点会自动放在所选的MenuItem. 这就是为什么TextField首先会失去焦点（即使我们autoFocus为其附加一个属性）。

好的，所以我们显然可以简单地使用useRefa 上的钩子来破解它TextField，然后focus()在打开时调用该方法Select。像这样的东西：

var inputRef = useRef(undefined);
...
<Select onAnimationEnd={() -> inputRef.current.focus()} ... >
    ...
    <TextField ref={inputRef} ... />
    ...
</Select>

好吧，别那么快，有一个问题！

这就是问题所在：您打开选择，焦点按预期转移到输入字段。然后插入搜索文本以过滤掉当前选定的值。现在，如果您使用退格键删除文本，直到当前选定的项目再次出现，您将看到焦点会自动从输入字段放置到当前选定的选项。乍一看，这似乎是一个可行的解决方案，但您可以看到用户体验受到影响的地方，并且我们没有得到我们想要的预期稳定行为。

解决方案

我发现你的问题有点模糊，没有任何代码和正确的解释，但我仍然发现它很有用，因为我正在寻找与你完全相同的解决方案：Searchable Select MUI Component with good UX。因此，请注意，这是我对您想要的可行解决方案的假设。

这是一个包含我的工作解决方案的CodeSandbox。所有重要的部分都在代码注释和此处进行了解释：

• 最重要的变化是MenuProps={{ autoFocus: false }}向Select组件添加属性以及autoFocus向TextField组件添加属性。
• 我已将搜索TextField放入 a 中ListSubheader，以便它不会充当菜单中的可选项目。即我们可以单击搜索输入而不触发任何选择。
• 我添加了一个自定义renderValue功能。如果搜索文本排除当前选定的选项，这可以防止在 Select 的值字段中呈现空字符串。
• 我已经禁用了TextField该onKeyDown函数的事件传播。这可以防止在键入时自动选择项目（这是默认Select行为）
• [奖励] 您可以通过多选支持轻松扩展此组件，这就是我最终为我的项目所做的，但我不会在此处包含详细信息，因为它超出了您的问题范围。

Answer 2

MUI 自动完成组件可能正是您所需要的\n[https://mui.com/components/autocomplete/](MUI 自动完成)

\n

自动完成是 MUI 库提供的组件。它具有与选择选项相同的功能，此外还提供搜索选项以及改善开发人员体验的其他选项。这是自动完成组件的一个小片段：

\n

import * as React from 'react';\nimport TextField from '@mui/material/TextField';\nimport Autocomplete from '@mui/material/Autocomplete';\n\nexport default function ComboBox() {\n  return (\n    <Autocomplete\n      disablePortal\n      id="combo-box-demo"\n      options={top100Films}\n      sx={{ width: 300 }}\n      renderInput={(params) => <TextField {...params} label="Movie" />}\n    />\n  );\n}\n\n// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top\nconst top100Films = [\n  { label: 'The Shawshank Redemption', year: 1994 },\n  { label: 'The Godfather', year: 1972 },\n  { label: 'The Godfather: Part II', year: 1974 },\n  { label: 'The Dark Knight', year: 2008 },\n  { label: '12 Angry Men', year: 1957 },\n  { label: "Schindler's List", year: 1993 },\n  { label: 'Pulp Fiction', year: 1994 },\n  {\n    label: 'The Lord of the Rings: The Return of the King',\n    year: 2003,\n  },\n  { label: 'The Good, the Bad and the Ugly', year: 1966 },\n  { label: 'Fight Club', year: 1999 },\n  {\n    label: 'The Lord of the Rings: The Fellowship of the Ring',\n    year: 2001,\n  },\n  {\n    label: 'Star Wars: Episode V - The Empire Strikes Back',\n    year: 1980,\n  },\n  { label: 'Forrest Gump', year: 1994 },\n  { label: 'Inception', year: 2010 },\n  {\n    label: 'The Lord of the Rings: The Two Towers',\n    year: 2002,\n  },\n  { label: "One Flew Over the Cuckoo's Nest", year: 1975 },\n  { label: 'Goodfellas', year: 1990 },\n  { label: 'The Matrix', year: 1999 },\n  { label: 'Seven Samurai', year: 1954 },\n  {\n    label: 'Star Wars: Episode IV - A New Hope',\n    year: 1977,\n  },\n  { label: 'City of God', year: 2002 },\n  { label: 'Se7en', year: 1995 },\n  { label: 'The Silence of the Lambs', year: 1991 },\n  { label: "It's a Wonderful Life", year: 1946 },\n  { label: 'Life Is Beautiful', year: 1997 },\n  { label: 'The Usual Suspects', year: 1995 },\n  { label: 'L\xc3\xa9on: The Professional', year: 1994 },\n  { label: 'Spirited Away', year: 2001 },\n  { label: 'Saving Private Ryan', year: 1998 },\n  { label: 'Once Upon a Time in the West', year: 1968 },\n  { label: 'American History X', year: 1998 },\n  { label: 'Interstellar', year: 2014 },\n  { label: 'Casablanca', year: 1942 },\n  { label: 'City Lights', year: 1931 },\n  { label: 'Psycho', year: 1960 },\n  { label: 'The Green Mile', year: 1999 },\n  { label: 'The Intouchables', year: 2011 },\n  { label: 'Modern Times', year: 1936 },\n  { label: 'Raiders of the Lost Ark', year: 1981 },\n  { label: 'Rear Window', year: 1954 },\n  { label: 'The Pianist', year: 2002 },\n  { label: 'The Departed', year: 2006 },\n  { label: 'Terminator 2: Judgment Day', year: 1991 },\n  { label: 'Back to the Future', year: 1985 },\n  { label: 'Whiplash', year: 2014 },\n  { label: 'Gladiator', year: 2000 },\n  { label: 'Memento', year: 2000 },\n  { label: 'The Prestige', year: 2006 },\n  { label: 'The Lion King', year: 1994 },\n  { label: 'Apocalypse Now', year: 1979 },\n  { label: 'Alien', year: 1979 },\n  { label: 'Sunset Boulevard', year: 1950 },\n  {\n    label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb',\n    year: 1964,\n  },\n  { label: 'The Great Dictator', year: 1940 },\n  { label: 'Cinema Paradiso', year: 1988 },\n  { label: 'The Lives of Others', year: 2006 },\n  { label: 'Grave of the Fireflies', year: 1988 },\n  { label: 'Paths of Glory', year: 1957 },\n  { label: 'Django Unchained', year: 2012 },\n  { label: 'The Shining', year: 1980 },\n  { label: 'WALL\xc2\xb7E', year: 2008 },\n  { label: 'American Beauty', year: 1999 },\n  { label: 'The Dark Knight Rises', year: 2012 },\n  { label: 'Princess Mononoke', year: 1997 },\n  { label: 'Aliens', year: 1986 },\n  { label: 'Oldboy', year: 2003 },\n  { label: 'Once Upon a Time in America', year: 1984 },\n  { label: 'Witness for the Prosecution', year: 1957 },\n  { label: 'Das Boot', year: 1981 },\n  { label: 'Citizen Kane', year: 1941 },\n  { label: 'North by Northwest', year: 1959 },\n  { label: 'Vertigo', year: 1958 },\n  {\n    label: 'Star Wars: Episode VI - Return of the Jedi',\n    year: 1983,\n  },\n  { label: 'Reservoir Dogs', year: 1992 },\n  { label: 'Braveheart', year: 1995 },\n  { label: 'M', year: 1931 },\n  { label: 'Requiem for a Dream', year: 2000 },\n  { label: 'Am\xc3\xa9lie', year: 2001 },\n  { label: 'A Clockwork Orange', year: 1971 },\n  { label: 'Like Stars on Earth', year: 2007 },\n  { label: 'Taxi Driver', year: 1976 },\n  { label: 'Lawrence of Arabia', year: 1962 },\n  { label: 'Double Indemnity', year: 1944 },\n  {\n    label: 'Eternal Sunshine of the Spotless Mind',\n    year: 2004,\n  },\n  { label: 'Amadeus', year: 1984 },\n  { label: 'To Kill a Mockingbird', year: 1962 },\n  { label: 'Toy Story 3', year: 2010 },\n  { label: 'Logan', year: 2017 },\n  { label: 'Full Metal Jacket', year: 1987 },\n  { label: 'Dangal', year: 2016 },\n  { label: 'The Sting', year: 1973 },\n  { label: '2001: A Space Odyssey', year: 1968 },\n  { label: "Singin' in the Rain", year: 1952 },\n  { label: 'Toy Story', year: 1995 },\n  { label: 'Bicycle Thieves', year: 1948 },\n  { label: 'The Kid', year: 1921 },\n  { label: 'Inglourious Basterds', year: 2009 },\n  { label: 'Snatch', year: 2000 },\n  { label: '3 Idiots', year: 2009 },\n  { label: 'Monty Python and the Holy Grail', year: 1975 },\n];\n

\n