Skip to content

Fix anchorsBySelect ref leak #1091

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Oct 24, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
revert: holdPositionOnRender
  • Loading branch information
gabrieljablonski committed Oct 23, 2023
commit 83b9d219d879bc1cb3d90a7dd2fe32a5803da566
41 changes: 1 addition & 40 deletions src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
/* eslint-disable jsx-a11y/click-events-have-key-events */
import { TooltipController as Tooltip } from 'components/TooltipController'
import { IPosition } from 'components/Tooltip/TooltipTypes.d'
import React, { useMemo, useState } from 'react'
import React, { useState } from 'react'
import { inline, offset } from '@floating-ui/dom'
import styles from './styles.module.css'

Expand All @@ -23,26 +23,6 @@ function App() {
setAnchorId(target.id)
}

const [which, setWhich] = useState<'1' | '2'>('1')
const [show, setShow] = useState(true)

const button1 = useMemo(
() => (
<button data-tooltip-id="hold" data-tooltip-content="button 1" className="anchor-button">
button 1
</button>
),
[],
)
const button2 = useMemo(
() => (
<button data-tooltip-id="hold" data-tooltip-content="button 2" className="anchor-button">
button 2
</button>
),
[],
)

return (
<main className={styles['main']}>
<button
Expand Down Expand Up @@ -113,25 +93,6 @@ function App() {
Tooltip content
</Tooltip>
</section>
<section style={{ marginTop: '100px', marginBottom: '100px' }}>
<div style={{ height: '21px' }}>
{show && <div>{which === '1' ? button1 : button2}</div>}
</div>
<Tooltip id="hold" isOpen holdPositionOnRender>
Hello world!
</Tooltip>
<button
onClick={() => {
setShow(false)
setTimeout(() => {
setShow(true)
}, 1000)
setWhich((w) => (w === '2' ? '1' : '2'))
}}
>
switch
</button>
</section>
<div style={{ display: 'flex', gap: '12px', flexDirection: 'row' }}>
<div>
<div
Expand Down
5 changes: 2 additions & 3 deletions src/components/Tooltip/Tooltip.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@ const Tooltip = ({
content,
contentWrapperRef,
isOpen,
holdPositionOnRender,
setIsOpen,
activeAnchor,
setActiveAnchor,
Expand Down Expand Up @@ -380,7 +379,7 @@ const Tooltip = ({
let updateTooltipCleanup: null | (() => void) = null
if (closeOnResize) {
window.addEventListener('resize', handleScrollResize)
} else if (activeAnchor && tooltipRef.current && !holdPositionOnRender) {
} else if (activeAnchor && tooltipRef.current) {
updateTooltipCleanup = autoUpdate(
activeAnchor as HTMLElement,
tooltipRef.current as HTMLElement,
Expand Down Expand Up @@ -640,7 +639,7 @@ const Tooltip = ({

const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0

return rendered || (wasShowing.current && holdPositionOnRender) ? (
return rendered ? (
<WrapperElement
id={id}
role="tooltip"
Expand Down
1 change: 0 additions & 1 deletion src/components/Tooltip/TooltipTypes.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,6 @@ export interface ITooltip {
style?: CSSProperties
position?: IPosition
isOpen?: boolean
holdPositionOnRender?: boolean
setIsOpen?: (value: boolean) => void
afterShow?: () => void
afterHide?: () => void
Expand Down
2 changes: 0 additions & 2 deletions src/components/TooltipController/TooltipController.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,6 @@ const TooltipController = ({
position,
isOpen,
disableStyleInjection = false,
holdPositionOnRender,
border,
opacity,
arrowColor,
Expand Down Expand Up @@ -334,7 +333,6 @@ const TooltipController = ({
style,
position,
isOpen,
holdPositionOnRender,
border,
opacity,
arrowColor,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,6 @@ export interface ITooltipController {
position?: IPosition
isOpen?: boolean
disableStyleInjection?: boolean | 'core'
holdPositionOnRender?: boolean
/**
* @description see https://developer.mozilla.org/en-US/docs/Web/CSS/border.
*
Expand Down