在 Material-ui 中显示 popper 时如何保持对输入字段的关注

Question

I want to add Accept and Reject buttons on input fields which should appear only when user has focused on input fields. Similar to what we get in Jira.

I tried creating a similar component with material-ui. Problem is, when I focus in input field, it shows those two buttons but later I am unable to type inside input box.

Can someone please help me on this? Below is a code sandbox: https://codesandbox.io/s/material-demo-2hrc4?file=/demo.tsx

Answer 1

I was able to do what you wanted using ButtonGroup and conditional rendering (not with popover). My guess is Popover has some z-index maybe because of which we can't enter anything in input, not entirely sure about it.

Check out if it works for you - https://codesandbox.io/s/material-demo-sgpt6?file=/demo.tsx

You forgot to handle state of your input too -

     <FilledInput
        id="filled-adornment-weight"
        value={value}
        aria-describedby="filled-weight-helper-text"
        inputProps={{
          "aria-label": "weight"
        }}
        onFocus={handleClick}
        onChange={e => setValue(e.target.value)} //set value//
      />