Topic: How to give focus to MDBInput Component from MDB React

ragnarecek pro asked 4 years ago


I am trying to find out how to give focus to Input Component from MDB React

This is the component

<Input label="Type a message" size="lg" ref={chatInput}  />

In older version of React and MDB React I was able to do this

useEffect(() => {
        !state.messagesAPI.isLoading && chatInput.current ? chatInput.current.setFocus() : null;
    },
    [state.messages]);

but now chatInput.current.setFocus is no longer a function. Is there a better way how to autofocus or generally give a focus to the Input please?


Piotr Glejzer staff commented 4 years ago

Hello,

I think there is a problem with to set focus on it. I don't why is that happening at the moment. I will try to figure it out as soon as possible. Sorry about that.


ragnarecek pro commented 4 years ago

Is there any update on the issue with setFocus, please?


Piotr Glejzer staff commented 4 years ago

try to use prop focused


ragnarecek pro commented 4 years ago

it doesnt seem to have the property focused or focus.


Piotr Glejzer staff commented 4 years ago

I will look into this but I'm so sure for 95% that is working. I will let you know.


aiivers free commented 4 years ago

Were you able to resolve this? I'm having the same issue.


ragnarecek pro commented 4 years ago

Unfortunately, I have not been able to fix the issue. My code was working previously but stopped after an update and I have not been able to identify the root cause. Let me please know if you find anything.


Piotr Glejzer staff commented 4 years ago

I added a little time aga that code

if (focused === true) {
  this.setState({ isFocused: focused }, () => {
    this.setFocus();
  });
}

https://git.mdbootstrap.com/mdb/react/re-pro/blob/master/src/components/Input/Input.js

and It should be work.


aiivers free commented 4 years ago

I'm not clear on where I should add this code. Sorry if it's a noob question, I'm kind of new to this.


aiivers free commented 4 years ago

I'm not clear on where I should add this code. Sorry if it's a noob question, I'm kind of new to this.


Piotr Glejzer staff commented 4 years ago

You don't have to do anything about that code. You have to add props focused to your component.


aiivers free commented 4 years ago

Still not working. Here is my code: import React, { Component } from "react"; import { MDBBtn, MDBInput, MDBContainer } from "mdbreact";

class Test extends Component { btnClick() { this.setState({ focus: "true" }); } state = { focus: "false" }; render() { return ( Focus ); } } export default Test;


Russell Teesdale free answered 4 years ago


Thought I'd comment here because I faced a similar issue, using the Pro component. I wanted to programmatically focus the input, i.e. my input is in a modal and I wanted to focus it when the modal opens.

This required a React Ref. This didn't work (code is for illustration purposes only):

import React, { useState, Fragment, useRef } from "react";
const textInputRef = useRef();

const showModal = () => {
    setModalVisible(true)
    textInputRef.current.focus()
}
...
<MDBModal isOpen={modalVisible}>
    ...
    <MDBInput ... ref={textInputRef} />
    ...
</MDBModal>

Instead, I had to use the non-Pro method:

import React, { useState, Fragment, useRef } from "react";
const textInputRef = useRef();

const showModal = () => {
    setModalVisible(true)
    textInputRef.current.focus()
}
...
<MDBModal isOpen={modalVisible}>
    ...
    <input type="text" ... ref={textInputRef} />
    ...
</MDBModal>

I guess my point is that using the component didn't work, but using the old-fashioned way did. This isn't ideal. Can you look in to including support for doing this using the Pro component?

Many thanks,

Jim


Piotr Glejzer staff commented 4 years ago

Yes, we can. I added task to fix this problem. We don't have a release now so If we will have we will try to fix this. Have a nice day.


Piotr Glejzer staff commented 4 years ago

Yes, we can. I added task to fix this problem. We don't have a release now so If we will have we will try to fix this. Have a nice day.


aiivers free answered 4 years ago


Adding my code here since it didn't display correctly in the reply

import React, { Component } from "react";
import { MDBBtn, MDBInput, MDBContainer } from "mdbreact";

class Test extends Component {
  btnClick() {
    this.setState({ focus: "true" });
  }
  state = { focus: "false" };
  render() {
    return (
      <MDBContainer>
        <MDBInput label="Input" focus />
        <MDBBtn onClick={this.btnClick.bind(this)}>Focus</MDBBtn>
      </MDBContainer>
    );
  }
}
export default Test;

Piotr Glejzer staff commented 4 years ago

You didn't connect input with a button. Try use prop focused


aiivers free commented 4 years ago

Adding prop focused works great for focusing the input when the component loads, but focusing the input on a button click does not work. I've tried many different things, could you maybe post some code that works? I'm really at a loss here. btnClick() { this.setState({ focused: true }); } state = { focused: true }; render() { return ( <MDBContainer> <MDBInput label="Input" focused={this.state.focused} /> <MDBBtn onClick={this.btnClick.bind(this)}>Focus</MDBBtn> </MDBContainer> ); } }


Piotr Glejzer staff commented 4 years ago

do you have an access to our gitlab repo? I added a new function to componentdidupdate to fix this problem but it will be available globally in the next release or if you have access to our gitlab so you can do it for your own.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.25.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: Yes
  • Provided link: No