What is the best approach to bring a button into focus after it has been enabled in a React.js application

Question

What is the best approach to bring a button into focus after it has been enabled in a React.js application

I'm a beginner in react js and I'm attempting to set the focus on a button after filling out all input fields. However, despite programmatically enabling the button with autoFocus implemented, I am unable to focus on it.

return (
            <div style={{ marginTop: '10%', marginLeft: '25%', backgroundImage: 'linear-gradient(to right, rgba(153,102,255,1), rgba(153,102,255,0.5))', color: '#f3f5f7', height: 'fit-content%', width: '50%', paddingBlockStart: '50px', position: 'fixed' }}>

                <form align="center"  >
                    <h1 align="center"> Login</h1><br /><br />

                    <Grid container direction="row" justify="center" alignItems="center" spacing={4} >
                        <Grid item >
                            <TextField input type="number" placeholder={this.props.intl.formatMessage(messages.PlaceHolder)} id="mobileNo" variant="outlined" size="small" required style={{ backgroundColor: 'white', width: '300px', borderRadius: '5px', border: '1px solid' }} onInput={(e) => { e.target.value = Math.max(0, parseInt(e.target.value)).toString().slice(0, 11) }} />
                        </Grid>
                        <Grid item >
                            <MyButton disabled={this.state.validate} variant="outlined" color="primary" onClick={() => this.clickValidate()}> {this.props.intl.formatMessage(messages.ValidateButton)} </MyButton>
                            <ToastContainer />
                        </Grid>
                    </Grid>
                    <br /><br />
                    <Grid container direction="row" justify="center" alignItems="center" spacing={4} >
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_1" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_2" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_3" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_4" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_5" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                        <Grid item >
                            <ValidationTextField type="number" onInput={this.restrictAlphabets} min={0} required id="otp_6" variant="outlined" size="small" onChange={this.handleChange} inputProps={{ maxLength: 1, size: 1 }} style={{ backgroundColor: 'white', width: '50px', borderRadius: '5px', border: '1px solid' }} />
                        </Grid>
                    </Grid>

                    <br /><br /><br />

                    <MyButton id="login" variant="outlined" aria-disabled={this.state.login} color="primary" onClick={this.handelLogin}> {this.props.intl.formatMessage(messages.Login)} </MyButton>
                    <br /><br /><br />
                    <Link style={{ color: 'white' }} onClick={this.handelResendOtp}> {this.props.intl.formatMessage(messages.ResendOtp)} </Link>
                    <br /><br /><br />

                </form>

                <div id="regAlert" style={this.state.unregistered ? {} : { display: 'none' }}>
                    <Alert severity="info"><h3>You are not registered with us, kindly visit www.agoraservices.us for registration!</h3></Alert >
                </div>

            </div>

Above you can find some example code where I'm trying to set the focus on the Login button

javascript html css reactjs material-ui

Answer 1

Answer №1

Utilize the Ref feature provided by React to easily reference any HTML element, then access it through its current property.

Check out this example on CodeSandbox

function App() {
  const mybtnRef = useRef();
  React.useEffect(() => {
    mybtnRef.current.focus();
  }, []);
  return (
    <div className="App">
      <button ref={mybtnRef} onClick={()=>console.log("hello")}>Click here</button>
    </div>
  );
}

Answer 2

Utilize the Ref feature provided by React to easily reference any HTML element, then access it through its current property.

Check out this example on CodeSandbox

function App() {
  const mybtnRef = useRef();
  React.useEffect(() => {
    mybtnRef.current.focus();
  }, []);
  return (
    <div className="App">
      <button ref={mybtnRef} onClick={()=>console.log("hello")}>Click here</button>
    </div>
  );
}

Answer 3

Answer №2

<!-- This code includes a reference for focusing and changing background color as well-->
<html>

<head>
  
    <style>
        td {
            border: 1px solid #ddd;
            padding: 10px;
        }
        
        td:first-child {
            width: 300px;
        }
    </style>  
</head>

<body>
  
  <div id="message">some text here</div>
   
 <div>
        <input type="text" id="addFriend">
        <input type="button" id="addNew" value="Add Friend"> </div>
    <div class="output"></div>
    <script>
<!-- array function to list out -->
        var myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
        window.onload = build;
        document.getElementById('addNew').addEventListener('click', addN, false);

        function addN() {
            var a = document.getElementById('addFriend').value;
            myArray.push(a);
            build();
        }

        function build() {
            var html = "<h1>Click Table</h1><table>";
            for (var x = 0; x < myArray.length; x++) {
                html += '<tr id="id' + x + '" data-row="' + x + '"><td>' + myArray[x] + '</td><td><a href="#" data-action="delete">Del</a></td><td><a href="#" data-action="edit">Edit</a></td></tr>';
            }
            document.querySelector('.output').innerHTML = html;
            var dad = document.querySelectorAll('[data-action="delete"]');
            for (var x = 0; x < dad.length; x++) {
                dad[x].addEventListener('click', function () {
                    event.preventDefault();
                    var iValue = this.closest('[data-row]').getAttribute('data-row');
                    var r = myArray.splice(iValue, 1);
                    build();
                    console.log(r);
                })
            }
            var dae = document.querySelectorAll('[data-action="edit"]');
            for (var x = 0; x < dae.length; x++) {
                dae[x].addEventListener('click', function () {
                    event.preventDefault();
                    var row = this.closest('[data-row]');
                    var rid = row.getAttribute('data-row');
                    row.style.backgroundColor = "Yellow";
                    var td = row.firstElementChild;
                    var input = document.createElement('input');
                    input.type = "text";
                    input.value = td.innerText;
                    td.innerHTML = "";
                    td.appendChild(input);
                    input.focus();
                    input.onblur = function () {
                        td.removeChild(input);
                        td.innerHTML = input.value;
                        myArray[rid] = input.value;
                        row.style.backgroundColor = "White"
                    }
                })
            }
            console.log(dad);
        }
    </script> 
</body>

</html>

Answer 4

<!-- This code includes a reference for focusing and changing background color as well-->
<html>

<head>
  
    <style>
        td {
            border: 1px solid #ddd;
            padding: 10px;
        }
        
        td:first-child {
            width: 300px;
        }
    </style>  
</head>

<body>
  
  <div id="message">some text here</div>
   
 <div>
        <input type="text" id="addFriend">
        <input type="button" id="addNew" value="Add Friend"> </div>
    <div class="output"></div>
    <script>
<!-- array function to list out -->
        var myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
        window.onload = build;
        document.getElementById('addNew').addEventListener('click', addN, false);

        function addN() {
            var a = document.getElementById('addFriend').value;
            myArray.push(a);
            build();
        }

        function build() {
            var html = "<h1>Click Table</h1><table>";
            for (var x = 0; x < myArray.length; x++) {
                html += '<tr id="id' + x + '" data-row="' + x + '"><td>' + myArray[x] + '</td><td><a href="#" data-action="delete">Del</a></td><td><a href="#" data-action="edit">Edit</a></td></tr>';
            }
            document.querySelector('.output').innerHTML = html;
            var dad = document.querySelectorAll('[data-action="delete"]');
            for (var x = 0; x < dad.length; x++) {
                dad[x].addEventListener('click', function () {
                    event.preventDefault();
                    var iValue = this.closest('[data-row]').getAttribute('data-row');
                    var r = myArray.splice(iValue, 1);
                    build();
                    console.log(r);
                })
            }
            var dae = document.querySelectorAll('[data-action="edit"]');
            for (var x = 0; x < dae.length; x++) {
                dae[x].addEventListener('click', function () {
                    event.preventDefault();
                    var row = this.closest('[data-row]');
                    var rid = row.getAttribute('data-row');
                    row.style.backgroundColor = "Yellow";
                    var td = row.firstElementChild;
                    var input = document.createElement('input');
                    input.type = "text";
                    input.value = td.innerText;
                    td.innerHTML = "";
                    td.appendChild(input);
                    input.focus();
                    input.onblur = function () {
                        td.removeChild(input);
                        td.innerHTML = input.value;
                        myArray[rid] = input.value;
                        row.style.backgroundColor = "White"
                    }
                })
            }
            console.log(dad);
        }
    </script> 
</body>

</html>

What is the best approach to bring a button into focus after it has been enabled in a React.js application

Answer №1

Answer №2

Similar questions

Communicating between parent and child components in React within an Asp.net Core 2.0 environment

Tips for expanding third-party classes in a versatile manner using Typescript

Passing a variable to the render method in a PDF document

Iterate through an array and update the innerHTML content for each value contained in the array

Accessing the clandestine div via direct hyperlink

Ways to determine the overall cost of a shopping cart using Vuejs Vuex

LESS — transforming data URIs with a painting mixin

Error: The script is not found in the package.json configuration

Troubleshooting problems with dropdown binding in Knockout ObservableArray

The function react.default.memo is not recognized at the createSvgIcon error

"Automatically close the fancybox once the form is confirmed in the AJAX success

"Exploring the Method of Inheriting from a BaseComponent in Angular 2

Experience the power of Meteor Accounts-facebook in React instead of BlazeJS!

Using jQuery to animate two images simultaneously in opposite directions

Verifying assigned role and running a specified task

The minified version of Bootstrap's CSS will only be loaded when I explicitly import it in my index

What is the best way to create a taskbar using HTML or Javascript?

Covering the full width of the page, the background image

Retrieve the ID from the database and showcase the content on a separate page

Angular 2 dropdown list that allows users to add a personalized value in the HTML code