Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Modal > Input not work when called from Menu

See original GitHub issue

🐛 Bug report

Modal > Input not works when called from a Menu Component.

💥 Steps to reproduce

Create something with Menu Component
Create Something with Modal component and put some Input inside
Call the Modal Component inside the Menu Component
See error

💻 Link to reproduction

CodeSandbox reproduction: https://codesandbox.io/s/frosty-sanderson-t88bn?file=/src/Main.js

🧐 Expected behavior

The Input should works normal, capturing the user input.

🌍 System information

Software	Version(s)
Chakra UI	1.4.2
Browser	Brave Browser (Chrome 89)
Operating System	Elementary OS 5.1.7

📝 Additional information

Preview

Issue Analytics

State:
Created 2 years ago
Reactions:2
Comments:9 (1 by maintainers)

Top GitHub Comments

2reactions

payapulacommented, Apr 6, 2021

@sammarxz I digged into this to check if this has to do with react-hook-form, but its not. This is happening for simple <input/> as well. Need to check on the implementation of Menu to find the root cause for this issue.

I was able to reproduce this issue in this Codesandbox repro

0reactions

dbousamracommented, Aug 5, 2021

Alright, seems unrelated to my new component. Turns out just upgrading Chakra fixes it. It was broken in 1.5.2 and works in 1.6.0

Top Results From Across the Web

Cannot type (or even focus) in input type="text" while ...

It appears that this answer would resolve your problem. Twitter Bootstrap modal blocks text input field. The author recommends against a ...

How to Build a Modal with JavaScript - freeCodeCamp

It's a web page element that pops up and displays in front of other page content. You can use modals for doing things...

Bootstrap Modal - examples & tutorial

If the height of a modal changes while it is open, you should call myModal.handleUpdate() to readjust the modal's position in case a...

Angular directives for Bootstrap - AngularUI

controller (Type: function|string|array , Example: MyModalController ) - A controller for the modal instance, either a controller name as a string, or an...

Modal - Bootstrap

How it works · Modals are built with HTML, CSS, and JavaScript. · Clicking on the modal “backdrop” will automatically close the modal....