Skip to content

fix: wrapper element changing after first render #935

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.

Sign up for GitHub

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 3 commits into from
Feb 3, 2023
Merged

fix: wrapper element changing after first render #935

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f6bbe65
refactor: Tooltip component always receives a wrapper from Controller
danielbarion Feb 3, 2023
1d1d395
fix: apply correct wrapper when watching data attributes
danielbarion Feb 3, 2023
ca56886
chore: add root files to npm ignore
danielbarion Feb 3, 2023
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
10 changes: 9 additions & 1 deletion .npmignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,15 @@ coverage/
.travis.yml
.editorconfig

// others
// misc folders
.vscode/
.husky/
.github/

// misc files
bundlesize.config.json

// bundler - rollup
rollup.config.dev.js
rollup.config.prod.js
rollup.config.types.js
4 changes: 2 additions & 2 deletions src/components/Tooltip/Tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const Tooltip = ({
events = ['hover'],
positionStrategy = 'absolute',
middlewares,
wrapper: WrapperElement = 'div',
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

default value removed because there's no way to use Tooltip component directly without Controller and Controller always passes a wrapper to Tooltip

wrapper: WrapperElement,
children = null,
delayShow = 0,
delayHide = 0,
Expand All @@ -38,7 +38,7 @@ const Tooltip = ({
setIsOpen,
}: ITooltip) => {
const tooltipRef = useRef<HTMLElement>(null)
const tooltipArrowRef = useRef<HTMLDivElement>(null)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

updated to match other possible elements

const tooltipArrowRef = useRef<HTMLElement>(null)
const tooltipShowDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
const tooltipHideDelayTimerRef = useRef<NodeJS.Timeout | null>(null)
const [inlineStyles, setInlineStyles] = useState({})
Expand Down
2 changes: 1 addition & 1 deletion src/components/Tooltip/TooltipTypes.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export interface ITooltip {
id?: string
variant?: VariantType
anchorId?: string
wrapper?: WrapperType
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

possible undefined removed because there's no way to use Tooltip component directly without Controller and Controller always passes a wrapper to Tooltip

wrapper: WrapperType
children?: ChildrenType
events?: EventsType[]
positionStrategy?: PositionStrategy
Expand Down
2 changes: 1 addition & 1 deletion src/components/TooltipController/TooltipController.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ const TooltipController = ({
setTooltipOffset(value === null ? offset : Number(value))
},
wrapper: (value) => {
setTooltipWrapper((value as WrapperType) ?? 'div')
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the fix.

when the component start to check anchor attributes and there's no wrapper, the wrapper state gets updated to be a div

setTooltipWrapper((value as WrapperType) ?? wrapper)
},
events: (value) => {
const parsed = value?.split(' ') as EventsType[]
Expand Down