Keep the button focused when click on input: Material-Ui

Asked
Active3 hr before
Viewed126 times

10 Answers

focusedinputmaterialclickbutton
90%

How to focus a Textfield after clicking a button. I tried to use autoFocus but it did not work out: Example sandbox,Thanks for contributing an answer to Stack Overflow!, Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
        <div>
          <button onClick={this.focusTextInput}>
            Click to focus Textfield
          </button>
       <br />
       <TextField
         label="My Textfield"
         id="mui-theme-provider-input"
         inputRef={this.textInput} 
       />
     </div>

    );
  }
}
load more v
88%

You can use the autoFocus attribute.

<TextField value="some value" autoFocus />
load more v
72%

Trap focus within a DOM node.,TrapFocus is a component that manages focus for its descendants. This is useful when implementing overlays such as modal dialogs, which should not allow the focus to escape while open.,By default, the component moves the focus to its descendants as soon as it opens: open={true}.

<button type="button" onClick={() => setOpen(true)}>
  Open
</button>
{open && (
  <TrapFocus open>
    <Box tabIndex={-1} sx={{ mt: 1, p: 1 }}>
      <label>
        First name: <input type="text" />
      </label>
      <br />
      <button type="button" onClick={() => setOpen(false)}>
        Close
      </button>
    </Box>
  </TrapFocus>
)}
load more v
65%

The API documentation of the Input React component. Learn more about the props and the CSS customization points.,If that's not sufficient, you can check the implementation of the component for more detail.,🎉 v5 beta is out! Head to the v5 documentation to get started.

Import

import Input from '@material-ui/core/Input';
// or
import {
   Input
} from '@material-ui/core';
75%

The MuiButtonBase name can be used for providing default props or style overrides at the theme level.,Any other props supplied will be provided to the root element (native element).,The ref is forwarded to the root element.

Import

import ButtonBase from '@material-ui/core/ButtonBase';
// or
import {
   ButtonBase
} from '@material-ui/core';
40%

You need to use a ref, see https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
        <div>
          <button onClick={this.focusTextInput}>
            Click to focus Textfield
          </button>
       <br />
       <TextField
         label="My Textfield"
         id="mui-theme-provider-input"
         inputRef={this.textInput} 
       />
     </div>

    );
  }
}
load more v
22%

 Pretag team - issue, fix, solve, resolve
60%

I want to focus this textfield when I click a button. I have this,StackOverflow: https://stackoverflow.com/questions/37949394/how-to-set-focus-to-a-materialui-textfield/44587705#44587705,If you have to put a slight time delay in to get the focus to happen.

<TextField ref="item" />
load more v
48%

In this example, the :focus-visible selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with :focus.,Comparison with other layout methods,You can polyfill :focus-visible using focus-visible.js.

: focus - visible
load more v
23%

 Pretag team - issue, fix, solve, resolve

Other "focused-input" queries related to "Keep the button focused when click on input: Material-Ui"