Mui Autocomplete custom listbox component list footer

[Fifaldi]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Hey, I am trying to add a custom listbox component with a link to subpage as a list footer. I have managed to make custom ListboxComponent however the link in it is not working. Further more, when I maka simple conosle log on a div inside custom ListobxComponent it`s not working either. All they do i close the Autocomplete Popper. Is there anyway to add a clickable element to ListbocComponent? I have tired same thing with custom PopperComponent with same result. Here is my sample code:

/* eslint-disable no-use-before-define */
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Paper from "@material-ui/core/Paper";
import { Popper } from "@material-ui/core";

const CustomPaper = (props) => {
  return (
    <div>
      <Paper elevation={10} {...props} />
      <a href="https://google.com">
        <p>Link to Google</p>
      </a>
    </div>
  );
};
const ListboxComponent = React.forwardRef(function ListboxComponent(rest, ref) {
  return (
    <>
      <ul style={{ minHeight: "450px" }} ref={ref} {...rest} />
      <a href="https://google.com">
        <p>Link to google</p>
      </a>
    </>
  );
});

const CustomPopper = (props) => {
  return (
    <>
      <Popper {...props} />
      <a href="https://google.com">
        <p>Link to Google</p>
      </a>
    </>
  );
};
export default function ComboBox() {
  return (
    <>
      <Autocomplete
        id="combo-box-demo"
        ListboxComponent={ListboxComponent}
        options={top5Films}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        PaperComponent={CustomPaper}
        PopperComponent={CustomPopper}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
      />
      <a href="https://google.com">
        <p>link to google</p>
      </a>
    </>
  );
}

const top5Films = [
  { title: "The Shawshank Redemption", year: 1994 },
  { title: "The Godfather", year: 1972 },
  { title: "The Godfather: Part II", year: 1974 },
  { title: "The Dark Knight", year: 2008 },
  { title: "12 Angry Men", year: 1957 },

];
 

Expected behavior 🤔

Link in custom ListboxComponent should navigate to another webpage.

Your environment 🌎

npx @mui/envinfo

System:
    OS: macOS 12.5
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.6.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 104.0.5112.79 (used)
    Edge: Not Found
    Firefox: Not Found
    Safari: 15.6
  npmPackages:
    @emotion/react: ^11.9.3 => 11.10.0 
    @emotion/styled: ^11.9.3 => 11.10.0 
    @mui/base:  5.0.0-alpha.92 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.93 => 5.0.0-alpha.93 
    @mui/material: ^5.8.7 => 5.9.3 
    @mui/private-theming:  5.9.3 
    @mui/styled-engine:  5.8.7 
    @mui/system:  5.9.3 
    @mui/types:  7.1.5 
    @mui/utils:  5.9.3 
    @types/react: 17.0.37 => 17.0.37 
    react: 17.0.2 => 17.0.2 
    react-dom: 17.0.2 => 17.0.2 
    typescript: 4.5.2 => 4.5.2 

[Fifaldi]

I've managed a work around. I know it's not pretty, however it woks in my case. Nevertheless I will still be looking for better solution as I am sure there is one. Here is my work around solution:

const ListboxComponent = React.forwardRef(function ListboxComponent(rest, ref) {
   return (
      <ul style={{ minHeight: "500px" }} ref={ref} {...rest} >
          <ul style={{ minHeight: "450px" }} ref={ref} {...rest}/ >
          <a href="https://google.com">
               <p>Link to google</p>
          </a>
      </ul>
    );
> });

[mnajdova]

Please share a codesandbox that we can look into.

[github-actions[bot]]

Since the issue is missing key information and has been inactive for 7 days, it has been automatically closed. If you wish to see the issue reopened, please provide the missing information.