如何在 Material UI Labs Autocomplete 中创建可点击的第一个选项 [英] How can I create a clickable first option in Material UI Labs Autocomplete

问题描述

您可以在下面的自动完成功能的 MUI 文档中找到一个示例，其中我在选项列表之前将链接传递给了 google.但是，我无法单击该选项，事件目标只是 MuiAutocomplete，而不是我正在传递的

我包含的一个单独的修复是将任何额外的 props 传递给 Paper 组件(通过 ...other).Popper 组件 将 props 传递给控制其定位的 Paper 组件，因此如果没有此更改，定位将不正确.

之所以需要event.preventDefault()，是因为焦点在点击之前的输入上.鼠标按下的默认效果之一是将焦点从输入更改为链接.onBlur of the input 将触发 Autocomplete 的列表框部分的关闭，这意味着链接将不再存在并且不会继续到 onClick 链接的行为.调用 event.preventDefault() 可防止发生焦点更改.

Below you can find an example from the MUI docs on Autocomplete where I've passed a link to google, prior to the options list. However, I can't click that option, the event target is just the MuiAutocomplete, rather than the <a> I'm passing.

import React from "react";
import TextField from "@material-ui/core/TextField";
import Paper from "@material-ui/core/Paper";

import Autocomplete from "@material-ui/lab/Autocomplete";

const Link = ({ children }) => (
  <Paper>
    <a href="https://www.google.com/" rel="nofollow" target="_blank">
      Go to Google
    </a>
    {children}
  </Paper>
);

export default function ComboBox() {
  return (
    <Autocomplete
      id="combo-box-demo"
      options={top100Films}
      getOptionLabel={option => option.title}
      style={{ width: 300 }}
      renderInput={params => (
        <TextField {...params} label="Combo box" variant="outlined" fullWidth />
      )}
      PaperComponent={Link}
    />
  );
}

https://codesandbox.io/s/material-demo-egi6p

Interestingly, passing open to the autocomplete

    <Autocomplete
      open // add this prop
      id="combo-box-demo"
      options={top100Films}

allows this to work as expected.

Currently, I'm using a onMouseDown to make this work but feel this is possibly a bad solution.

解决方案

You can fix this by adding:

      onMouseDown={event => {
        event.preventDefault();
      }}

to your link so that your Link component looks like:

const Link = ({ children, ...other }) => (
  <Paper {...other}>
    <a
      onMouseDown={event => {
        event.preventDefault();
      }}
      href="https://www.google.com/"
      rel="nofollow"
      target="_blank"
    >
      Go to Google
    </a>
    {children}
  </Paper>
);

A separate fix that I've included is passing through any additional props to the Paper component (via ...other). The Popper component passes props to the Paper component that control its positioning, so the positioning will be incorrect without this change.

The reason why event.preventDefault() is necessary, is because the focus is on the input prior to the click. One of the default effects of the mouse-down would be to change focus from the input to the link. The onBlur of the input would trigger a close of the listbox portion of the Autocomplete which means the link would no longer be present and it would not continue on to the onClick behavior of the link. Calling event.preventDefault() prevents the focus change from occurring.

这篇关于如何在 Material UI Labs Autocomplete 中创建可点击的第一个选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！