Stack Overflow
Stack Overflow

Questions tagged [react-popper]

46 questions
1
vote
1 answer

popper cant close when switching between toggle button

I am using the Material Ui Toggle button component, which have Monthly and Weekly two buttons. Both using the same component, the popper will show only if the selected button is weekly. My problem is when I open the popper in the weekly type,…
ELsssss
  • 216
  • 2
  • 11
1
vote
0 answers

MUI Popper appears at the top-left corner irrespective of specified position

I am using MUI popper component in my application. On the button click the popper must appear beside the button but even though the specified position is mentioned, the popper is appearing in the top left corner of the web page. Here's the code…
Sujit
  • 11
  • 1
1
vote
3 answers

floating-ui react-dom-interactions how to set floating element width same as reference width

In my react app I am trying to build a dropdown menu with floating-ui/react-dom-interactions (formerly knowns as react-popper). Here is a codesandbox link to a demo of my component. Here is a output of the current state of the app. I want to set…
Ahashan Alam Sojib
  • 77
  • 1
  • 7
1
vote
0 answers

How to use react-popper with render props using functional component

`
1
vote
2 answers

How can i store api response in variable and pass it to react popup video player

Call API using fetch and printed it on the console. app.js const onGridReady = (params) => { console.log("grid is ready"); fetch("http://localhost:8000/get_all") .then((resp) => resp.json()) .then((resp) => { …
Hariprasath Lakshmanan
  • 43
  • 1
  • 10
1
vote
1 answer

React Bootstrap OverlayTrigger change popperConfig offset px to em?

i'm struggling trying to change the size units of an overlayTrigger's popperConfig from px to em in react (& react bootstrap) and can't seem to find any docs that can help. Any idea on how i can achieve this? Of course, overriding in css is always…
Franke
  • 13
  • 4
1
vote
0 answers

Wrong arrow placement in react-popper

I am currently trying to fix a bug that appeared when using react-popper. It seems that the placement prop is false when there is not enough space above the reference element. In the Screenshot below I can see that the placement prop is top even…
yilkur
  • 31
  • 4
1
vote
0 answers

Is there a way to check expanded/collapsed state of a React-popper

I want to be able to know if the react-popper is open or closed at any given point in time. I can't seem to find any references to this usecase in the documentation. Is this unavailable? Should I simply set up a local state to keep track of this?
Zephyr
  • 1,612
  • 2
  • 13
  • 37
1
vote
0 answers

How to make react-popper tooltip interactive?

I am using the usePopper hook provided by react-popper to create tooltips. My usage is based on this official example. I would like users to be able to interact with the tooltip (e.g., select text or click a button in the tooltip). However, the…
ErikWittern
  • 1,083
  • 9
  • 13
1
vote
0 answers

How can i use one popover for multiple items in React using popperjs?

I want to use one popover for all my Navigation Items, using PopperJS. When the user hovers over an nav item, the popover should be displayed at the location with the corresponding text. At the moment my navigation looks like this: const navigation…
Niklas
  • 1,638
  • 4
  • 19
  • 48
1
vote
1 answer

react-popper component hook is returning "TypeError: Object(...) is not a function"

I'm just trying to get a working version of the example in react-popper's documentation This is what I am using almost verbatim. only major difference is I need to be able to supply a component of any type as a prop to replace the button that opens…
Jub10
  • 183
  • 1
  • 2
  • 15
1
vote
0 answers

react-popper misplacing popper element

I have a menu component that uses popperjs for showing the popup menu. When clicked on the button for the first time the popup appears at top left corner of the screen instead of below the button. I have used react portal for placing the rendered…
Nilesh Kumar
  • 343
  • 1
  • 5
  • 18
1
vote
1 answer

Place MaterialUI Tooltip "on top" of anchor element? (React)

Seems impossible to place "on top" (stacked/layered above) the triggering anchor element. It always appears outside the parent, using "placement" to decide where. I believe it's the Flip tool within Popper that manages placement and…
doublejosh
  • 5,548
  • 4
  • 39
  • 45
1
vote
0 answers

How can the Popper.js library be run in a Vue instance

I have a Vue spa. I wish to implement a popper.js popup as per this codepen from the official docs https://codepen.io/FezVrasta/pen/yWGrOZ. I cannot seem to get the "pop" element positioned to the right of "ref". The "pop" div is showing under the…
Eden WebStudio
  • 687
  • 2
  • 14
  • 34
1
vote
1 answer

Popper.js React Wrapper - React.createElement: type is invalid

I am trying to implement the standalone example from here, using react-popper - I basically just copy pasted the code for now. It does render the component. However, when I click everything breaks. I am using it in Gatsby.js - if that should make a…
R. Kohlisch
  • 2,823
  • 6
  • 29
  • 59
1
2
3 4