Topic: How to give focus to MDBInput Component from MDB React
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?
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 5 years ago
You didn't connect input with a button. Try use prop focused
aiivers commented 5 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 5 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.
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 5 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 5 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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.25.2
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 5 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 5 years ago
Is there any update on the issue with setFocus, please?
Piotr Glejzer staff commented 5 years ago
try to use prop
focusedragnarecek pro commented 5 years ago
it doesnt seem to have the property focused or focus.
Piotr Glejzer staff commented 5 years ago
I will look into this but I'm so sure for 95% that is working. I will let you know.
aiivers commented 5 years ago
Were you able to resolve this? I'm having the same issue.
ragnarecek pro commented 5 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 5 years ago
I added a little time aga that code
https://git.mdbootstrap.com/mdb/react/re-pro/blob/master/src/components/Input/Input.js
and It should be work.
aiivers commented 5 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 commented 5 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 5 years ago
You don't have to do anything about that code. You have to add props
focusedto your component.aiivers commented 5 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;