Stack Overflow
Stack Overflow

Questions tagged [react-modal]

Accessible modal dialog component for React.JS

260 questions
1
vote
2 answers

How to test web page has scrolling disabled with Cypress?

Maybe it's an easy one, but my Cypress tests fail to test locked scrolling functionality. So I have this React modal component which sets document.body.style.overflow = 'hidden' upon mount (client side only) I have the following Cypress's test…
pollx
  • 643
  • 9
  • 21
1
vote
1 answer

Why is my custom Modal not opening after clicking the icon?

I am trying to create a custom Modal in react. Followed most of tutorials I found and my Modal just never shows up. On the other hand react-modal did work, but I was having trouble styling it. Nevertheless my custom Modal should work, though it…
aratata
  • 1,147
  • 1
  • 6
  • 22
1
vote
0 answers

Populating Modals From Mapped Cards in React (ES6/ES7)

tl;dr new to coding. 1 card = 1 pokémon name. Mapped out 898+ cards, listed in increments of 20. How can I set a modal to pop up when a card is clicked, and have it display the data in Pokemon.js? Currently a developer in training. I have individual…
jordanwhunter
  • 13
  • 4
1
vote
0 answers

CSS Transition Funkiness in Safari 14

I'm trying to debug an apparent problem with CSS transitions in the new Safari 14. For some reason, the transition works when closing the modal, but not when opening the modal (I'm having the same problem on the new mobile-safari as well). In this…
Benjamin Padula
  • 11
  • 2
1
vote
2 answers

React Input Validation Not Working in Form

I have a component in React that has required in its fields. The idea is onClick will trigger a separate function that adds a soccer player to two different stores (similar to a TODO app). However, it appears that the validation does not work -name…
clattenburg cake
  • 1,096
  • 3
  • 19
  • 40
1
vote
0 answers

React - loop: pass data to Modal component

I am quite new to React and I am playing around with Gatsby. I would like to show a list of team members and when clicking on one, further details should show in a modal (react-modal). My data is gathered after which I loop through it and create a…
TomDS
  • 49
  • 4
1
vote
1 answer

How to trigger API inside React Modal only when Modal is opened?

I am working on a REACT based web-app POC in my org. There is table of issues and for each of these issues, I have to provide a button in the table which when a user clicks on - it will open up a modal, fetch data for that issue via an API call and…
raghavsikaria
  • 867
  • 17
  • 30
1
vote
0 answers

How can I display different links in react--modal-video?

I am having one issue displaying different video links. Here is my component using react-modal-video. When I inspect the page in chrome, I see that the id is attached to the video, but, it keeps playing the first link. I have my data in a separate…
braddonak
  • 11
  • 1
1
vote
1 answer

Drop Down not showing in TinyMCE Editor with react modal

I have used a react modal to display the tinyMCE editor.When I load the editor in that modal the editors appears.The issue is the drop downs within the tinyMCE are not working. EX: block_formats drop down not working
Susampath
  • 706
  • 10
  • 13
1
vote
1 answer

reactstrap modal not working properly have to cancel it twice

I have a dropdown menu and inside the menu there is an option Load Plan, when this option is selected a modal should appear. As implemented the modal appears when the option Load Plan is clicked on, but when you cancel the modal it dismisses but…
Christopher
  • 15
  • 1
  • 7
1
vote
2 answers

react-modal - onChange on input is not updating state

I hope you will be able to help me with an answer to my question. I am using react-modal and inside the modal I have an input where users can write an email. When writing the email it should update the state but that is not happening. What is…
Michael Ørregaard Andersen
  • 94
  • 1
  • 15
1
vote
1 answer

How can I added a wrapper with styled component in React Modal in Typescript?

I have the following React Modal:
Felipe Augusto
  • 7,733
  • 10
  • 39
  • 73
1
vote
1 answer

How to have multiple Providers or state available only for a part of the layout

I followed the React-Router Modal tutorial to have something look-like 2 DOMs (one for the modal with current location, and the default with previous location). The problem: I need to be able to pass through all Components into the Modal a new…
Arthur
  • 4,870
  • 3
  • 32
  • 57
1
vote
2 answers

Opening a Modal from right icon in header -React Navigation

I need to open a modal through the right button in the header and I am able to do it.The problem is The modal should be 3/4 of the page's width and the rest 1/4 of the previous page should be visible. StackNavigator code is below FilterOptions: { …
Janaki Narayanan
  • 523
  • 6
  • 24
1
vote
2 answers

passing data into a modal

I'm trying to pass some data from container to modal, and i've done this. it got error undefined is not an object evaluating (evaluating _this.props.status) is there anything i did worng? what should i call in props these are my…
Billy Ronaldo Chandra
  • 182
  • 2
  • 5
  • 18
1 2 3
…
17 18