Headless ui dialog is not close on Esc key
Unanswered
utsav-flex posted this in #help-forum
I have next js project with tailwind css and headlessui component, next js version is 14.2.3 and @headlessui/react version is 2.1.3, we have use headless ui dialog box component, inside our marketing page and my marketing page's data come from graph-ql query and all page are server side render, if i open the modal and try to close the modal through Ecs key button didn't close.
13 Replies
Dwarf Hotot
You can use window event listener keydown with a function like handleKey . Then declare that function with the event as a parameter then use if condition to check event.key === "Escape" then set the state to false. Easy peasy 😁
but headless ui provide default functionality, so why it will not working
https://headlessui.com/react/dialog#keyboard-interaction
https://headlessui.com/react/dialog#keyboard-interaction
Dwarf Hotot
I don't think so that they provide this escape functionality, is it written in their doc
yes, in their doc all things mention
Dwarf Hotot
Then there will a command component also which you need to install check again
there are no any kind of command component, we have use Dialog component, and i try to set the same component outside marketing page then it is working properly, but inside marketing page it is not work properly.
Dwarf Hotot
Show code for both
Marketing page layout file: https://prnt.sc/ZmU21ltH2XHq
Marketing page group: https://prnt.sc/f-hOqgwynfoL
Modal Component file: https://prnt.sc/TdJQoWvtdDIZ
Outside marketing group (Change log page) : https://prnt.sc/Kv2HEsMlxMnp
Outside marketing group it is working properly, but inside marketing it will not working properly
Marketing page group: https://prnt.sc/f-hOqgwynfoL
Modal Component file: https://prnt.sc/TdJQoWvtdDIZ
Outside marketing group (Change log page) : https://prnt.sc/Kv2HEsMlxMnp
Outside marketing group it is working properly, but inside marketing it will not working properly
Dwarf Hotot
You are using state for opening and closing the modal
yes
Dwarf Hotot
useEffect(() => {
const handleKey = (event: any) => {
if (event.key === "Escape") {
setOpenPopup(false);
}
};
window.addEventListener("keydown", handleKey);
return () => {
window.removeEventListener("keydown", handleKey);
};
}, []);
use this i think they are telling you just which key is used for what like a standard key definition
const handleKey = (event: any) => {
if (event.key === "Escape") {
setOpenPopup(false);
}
};
window.addEventListener("keydown", handleKey);
return () => {
window.removeEventListener("keydown", handleKey);
};
}, []);
use this i think they are telling you just which key is used for what like a standard key definition
okay