diff --git a/CHANGELOG.md b/CHANGELOG.md index 88b4e15b89..78f6e2c14b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### BREAKING CHANGES - Rename `context` prop to `mountNode` in `PortalInner` @layershifter ([#1288](https://github.com/stardust-ui/react/pull/1288)) - Updated Teams' theme color palette values, removed color related site variables @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) +- Remove `defaultTarget` prop in `Popup` component @layershifter ([#1153](https://github.com/stardust-ui/react/pull/1153)) ### Features - Add default child a11y behavior to `Menu` related behaviors @silviuavram ([#1282](https://github.com/stardust-ui/react/pull/1282)) @@ -29,6 +30,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add `mountNode` and `mountDocument` props to allow proper multi-window rendering ([#1288](https://github.com/stardust-ui/react/pull/1288)) - Added default and brand color schemes in Teams' theme @mnajdova ([#1069](https://github.com/stardust-ui/react/pull/1069)) +### Fixes +- Fix double rendering of `Popup` component @layershifter ([#1153](https://github.com/stardust-ui/react/pull/1153)) + ## [v0.29.1](https://github.com/stardust-ui/react/tree/v0.29.1) (2019-05-01) [Compare changes](https://github.com/stardust-ui/react/compare/v0.29.0...v0.29.1) diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx index af944e39c2..e8c006e1db 100644 --- a/packages/react/src/components/Popup/Popup.tsx +++ b/packages/react/src/components/Popup/Popup.tsx @@ -26,6 +26,7 @@ import { import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../types' import { getPopupPlacement, applyRtlToOffset, Alignment, Position } from './positioningHelper' +import createPopperReferenceProxy from './createPopperReferenceProxy' import PopupContent from './PopupContent' @@ -130,9 +131,6 @@ export interface PopupProps */ target?: HTMLElement - /** Initial value for 'target'. */ - defaultTarget?: HTMLElement - /** Element to be rendered in-place where the popup is defined. */ trigger?: JSX.Element @@ -169,7 +167,6 @@ export default class Popup extends AutoControlledComponent() as React.MutableRefObject // focusable element which has triggered Popup, can be either triggerDomElement or the element inside it triggerFocusableDomElement = null popupDomElement = null @@ -267,7 +264,7 @@ export default class Popup extends AutoControlledComponent { - this.trySetState({ target: domNode }) - this.triggerDomElement = domNode - }} - > + {React.cloneElement(triggerElement, { ...accessibility.attributes.trigger, ...triggerProps, @@ -418,7 +410,7 @@ export default class Popup extends AutoControlledComponent - ) + ) } @@ -570,8 +562,8 @@ export default class Popup extends AutoControlledComponent + + constructor(refObject) { + this.ref = refObject + } + + getBoundingClientRect() { + return _.invoke(this.ref.current, 'getBoundingClientRect', {}) + } + + get clientWidth() { + return this.getBoundingClientRect().width + } + + get clientHeight() { + return this.getBoundingClientRect().height + } +} + +/** + * Popper.js does not support ref objects from `createRef()` as referenceElement. If we will pass + * directly `ref`, `ref.current` will be `null` at the render process. + * + * @see https://popper.js.org/popper-documentation.html#referenceObject + * @see https://github.com/FezVrasta/react-popper/blob/v1.3.3/src/Popper.js#L166 + */ +const createPopperReferenceProxy = (reference: HTMLElement | React.RefObject) => { + const referenceRef = isRefObject(reference) ? reference : toRefObject(reference) + + return new ReferenceProxy(referenceRef) +} + +export default createPopperReferenceProxy