While developing a next.js app, I encountered an issue with the chat modal. When the input field is in focus, I want to resize the modal height so that the keyboard popup does not hide the input field.
I attempted to modify the DOM but could not get it to work. Below is the code snippet that I tried:
const [modalElements, setModalElements] = useState([]);
useEffect(() => {
if (typeof document !== 'undefined') {
const elements = document.getElementsByClassName('modalcontent');
setModalElements(Array.from(elements));
}
}, []);
const handleInputFocus = () => {
setInputFocused(true);
if (typeof document !== 'undefined') {
console.log("hello input");
modalElements.forEach((element) => {
element.style.height = "55%";
});
}
}