Fix ref .current set by using a proxy
#249
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
hugo-vrijswijk
force-pushed
the
fix-current-set
branch
from
e51036b to
81b0246
Compare
Since 9.0.0, when `.current` is set, this does not trigger a rerender. This is because the `setRefElement` function is only called when the ref set is called as a function. Certain libraries will set `.current` directly instead of calling the ref function, which React normally handles with a Ref, but the ref-like function in this hook introduced in 9.0.0 does not handle this case. This PR fixes that by using a proxy to properly call `setRefElement` when `.current` is set.
hugo-vrijswijk
force-pushed
the
fix-current-set
branch
from
81b0246 to
8ba4897
Compare
snelsi
approved these changes
Jan 3, 2024
src/useResizeDetector.ts
Outdated
| } | ||
| }, | ||
|
|
||
| const onRefChange: OnRefChangeType<T> = useMemo( |
There was a problem hiding this comment.
You should update onRefChange property name to better represent it's purpose.
Consider renaming it to refProxy or ref.
There was a problem hiding this comment.
Good point, fixed
src/useResizeDetector.ts
Outdated
| get(target, prop) { | ||
| if (prop === 'current') { | ||
| return refElement; | ||
| } else { |
There was a problem hiding this comment.
Looks like you don't need this else
There was a problem hiding this comment.
I added the proxy not to break anything. If I remove the else it becomes impossible to set other properties on the ref. Not sure if anyone is doing that or should be supported, but this at least keeps the behaviour the same. I could change it to not set the prop and return false if you think that fits better
There was a problem hiding this comment.
I meant that you don't need the "else" word itself 😅
There was a problem hiding this comment.
Ah I see 😅. Changed it
|
Published in v10.0.0-beta.1 and v9.1.2-beta.0 |
|
Nice! 🔥 |
hkfb
pushed a commit
to equinor/webviz-subsurface-components
that referenced
this pull request
Feb 28, 2024
## [0.5.7](https://github.com/equinor/webviz-subsurface-components/compare/[email protected]@0.5.7) (2024-02-28) ### Bug Fixes * bump react-resize-detector from 9.1.0 to 10.0.1 in /typescript ([#1935](#1935)) ([df5632d](df5632d)), closes [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [#247](#247)
hkfb
pushed a commit
to equinor/webviz-subsurface-components
that referenced
this pull request
Feb 28, 2024
## [1.2.7](https://github.com/equinor/webviz-subsurface-components/compare/[email protected]@1.2.7) (2024-02-28) ### Bug Fixes * bump react-resize-detector from 9.1.0 to 10.0.1 in /typescript ([#1935](#1935)) ([df5632d](df5632d)), closes [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [#247](#247)
hkfb
pushed a commit
to equinor/webviz-subsurface-components
that referenced
this pull request
Feb 28, 2024
## [0.18.1](https://github.com/equinor/webviz-subsurface-components/compare/[email protected]@0.18.1) (2024-02-28) ### Bug Fixes * bump react-resize-detector from 9.1.0 to 10.0.1 in /typescript ([#1935](#1935)) ([df5632d](df5632d)), closes [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [#247](#247)
hkfb
pushed a commit
to equinor/webviz-subsurface-components
that referenced
this pull request
Feb 28, 2024
## [1.4.8](https://github.com/equinor/webviz-subsurface-components/compare/[email protected]@1.4.8) (2024-02-28) ### Bug Fixes * bump react-resize-detector from 9.1.0 to 10.0.1 in /typescript ([#1935](#1935)) ([df5632d](df5632d)), closes [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [#247](#247)
hkfb
pushed a commit
to equinor/webviz-subsurface-components
that referenced
this pull request
Feb 28, 2024
## [1.1.7](https://github.com/equinor/webviz-subsurface-components/compare/[email protected]@1.1.7) (2024-02-28) ### Bug Fixes * bump react-resize-detector from 9.1.0 to 10.0.1 in /typescript ([#1935](#1935)) ([df5632d](df5632d)), closes [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [maslianok/react-resize-detector#249](maslianok/react-resize-detector#249) [#247](#247)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Since 9.0.0, when
.currentis set, this does not trigger a rerender. This is because thesetRefElementfunction is only called when the ref set is called as a function. Certain libraries will set.currentdirectly instead of calling the ref function, which React normally handles with a Ref, but the ref-like function in this hook introduced in 9.0.0 does not handle this case.This PR fixes that by using a proxy to properly call
setRefElementwhen.currentis set.