Stack Overflow
Stack Overflow

Questions tagged [react-modal]

Accessible modal dialog component for React.JS

260 questions
5
votes
2 answers

React Modal doesn't show up correctly

I'm having a problem with a modal which doesn't show up correctly. When I click the button the screen becomes all gray without showing me the content of the modal and when I try to insert a text in the input lets me do it, even if you don't see what…
Salah Miftah
  • 146
  • 8
5
votes
1 answer

Testing React Modals with Enzyme - can't find portal

I would like to test a component built with react-modal. The library uses portals to mount the actual modal outside the parent. The find method in enzyme only looks though the tree starting at your wrapper element, which does not include the open…
Cgalbiati
  • 51
  • 1
  • 3
5
votes
2 answers

Tabindex not working in Chrome (React app)

I use react and react-modal to create an overlay over a website. This overlay contains various elements and also a form (overview below). I want to be able to guide the user through the form using TAB keys. I assigned tabindex=0 to the required…
Gegenwind
  • 1,388
  • 1
  • 17
  • 27
4
votes
2 answers

React native rerenders whole component on modal open/close

My problem I render a list of simple items (numbers or strings) using Array.map method. I use Modal to add/update items. However, every opening or closing of the modal makes react rerender the whole array, even if the array remains unmodified. I…
pch
  • 533
  • 6
  • 11
4
votes
0 answers

React Native Modal is frozen once it's opened

I have a modal that opens up when a user visits a screen depending on whether the user has the token or not. So the sequence of events goes like the following: 1) the screen listens for the user's arrival and attempts to retrieve the token from the…
Kevvv
  • 3,655
  • 10
  • 44
  • 90
4
votes
3 answers

React-responsive-modal: Change background-color when modal is open

I use react-responsive-modal to open some modals within my react app. When i open the modal, there is an overlay effect that darkens the background behind the modal. Is there any way to darken the background for 100% or set any color for the…
Alex
  • 132
  • 1
  • 4
  • 21
4
votes
1 answer

I have a modal that works when visible is set to true on load, however if it is set to false or I close and reopen it doesn't work on android

I have an information carousel in a modal. On Ios it loads perfectly and can be opened and closed. On Android it opens perfectly if the initial state is set to true, but when it is closed and reopened the modal fades in slowly and the carousel is…
Ryan Chartres
  • 41
  • 5
4
votes
3 answers

Tap outside of modal to close modal (react-native-modal)

Anyone has experience of implementing react-native-modal? While I'm using it, modal isn't closed when I tap outside of modal. Here is what I've tried Adding onBackdropPress(() => {this.props.hideModal()}) Adding TouchableWithoutFeedback inside and…
merry-go-round
  • 4,533
  • 10
  • 54
  • 102
3
votes
1 answer

Modal state not being set to closed after history.push in React

I have a slider that contains "Events" cards, and when the user clicks on a card a modal shows up. And inside the modal, there's a button that redirects the user to a registration form. I'm using react-modal. The problem is that when the user clicks…
Ala Ben Aicha
  • 1,155
  • 2
  • 14
  • 30
3
votes
1 answer

How do I use React Modal with a map function?

I'm mapping through data, I want to click on an image and have a modal popup with the data.title and data.info. Each modal is only showing the last data from my array. I've read that all the modals are popping up together and I'm only seeing the…
paeshi
  • 35
  • 1
  • 4
3
votes
2 answers

Passing react-table row data to react-modal

Being new to React, I'm having a hard time to pass data from react-table to an "edit" modal and can't seem to find a solution for a similar problem. Data are fetched from the database by an Axios API call and rendered in a react-table. I need to…
aeroplaniko
  • 33
  • 1
  • 4
3
votes
3 answers

React Native pass data into modal

I'm still new in react native and programming, and i am trying to pass items from my flat list into a modal. What i'm about to pass is the icon, status, and description. How am i supposed to do that? this is my flatlist buildPanel(index, item) { …
Billy Ronaldo Chandra
  • 182
  • 2
  • 5
  • 18
3
votes
0 answers

Center react modal vertically and horizontally on selected div - not on window

I am using react-modal. It works fine and ends up centered vertically and horizontally referenced to the window. I have menus top and left and the rest is a workspace / canvas. I would like the modal to center (both x & y direction) using this area…
Brainmaniac
  • 2,203
  • 4
  • 29
  • 53
3
votes
2 answers

Using React portals to show a modal component(?) when a table row is clicked

While becoming acquainted with React I stumbled upon the concept of portals in the developer documentation. However, I'm having difficulty understanding how this portal component actually renders on-demand, and how I can pass data to it to populate…
Lukon
  • 255
  • 4
  • 20
3
votes
0 answers

how to apply different styles to Modal.Header for React-Bootstrap Modal component?

I'm new to React. I'm trying to create 2 different styles of Modals with the React-Bootstrap Modal component: one with an orange header, and another white header (aka no header). 2 types of headers img The style of modal used depends on where it's…
pvilian
  • 31
  • 1
  • 6
1
2
3
…
17 18