Can React Material-UI InputBase component have an onSubmit action?

Question

I have been working with material UI in building a react web app. I'd like to use InputBase to take in text and have an action on pressing the 'Enter' key. I have the onChange event working correctly to update the input, but I cannot seem to figure out how to have an onSubmit action.

I have tried nesting the component in a form, but have not gotten it to work. Not only does it not perform the action, but it also refreshes the page. The only thing mildly helpful that I have found was this but I couldnt make heads or tails of it.

The inputBase API doesnt seem to have the functionality for it. Any suggestions? Thanks in advance!

Here is my code as is:

import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import InputBase from '@material-ui/core/InputBase';
import SearchIcon from '@material-ui/icons/Search';

const useStyles = makeStyles((theme) => ({
    grow: {
      flexGrow: 1,
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
    search: {
      position: 'relative',
      borderRadius: theme.shape.borderRadius,
      backgroundColor: fade(theme.palette.common.white, 0.15),
      '&:hover': {
        backgroundColor: fade(theme.palette.common.white, 0.25),
      },
      marginRight: theme.spacing(2),
      marginLeft: 0,
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        marginLeft: theme.spacing(3),
        width: 'auto',
      },
    },
    searchIcon: {
      padding: theme.spacing(0, 2),
      height: '100%',
      position: 'absolute',
      pointerEvents: 'none',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
      // vertical padding + font size from searchIcon
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
  }));

  export default function PrimarySearchAppBar(props) {
    const classes = useStyles();

    return (
      <div className={classes.grow}>
        <AppBar position="static">
          <Toolbar>
            <Typography className={classes.title} variant="h6" noWrap>
              Vision - Github Activity Analyzer
            </Typography>
            <div className={classes.search}>
            <form onSubmit={props.submit}>
              <div className={classes.searchIcon}>
                <SearchIcon />
              </div>
                <InputBase
                    placeholder="Search…"
                    classes={{
                    root: classes.inputRoot,
                    input: classes.inputInput,
                    }}
                    inputProps={{ 'aria-label': 'search' }}
                    onChange={props.input}
                />
              </form>
            </div>
          </Toolbar>
        </AppBar>
      </div>
    );
  }```

Answer 1

The issue isn't with the input or material ui

If you want to replicate a form submission behavior Simply wrap your input with a form and you should give it a onSubmit handler

To avoid "refreshing" you should preventDefault behavior

const onSubmit = e => {
    e.preventDefault();
    alert("gotta submit");
  };

Here is a codesandbox demo (type something and hit enter)