Skip to content

Commit

Permalink
[SelectAllActions] fix console deprecation warning in StrictMode
Browse files Browse the repository at this point in the history
this prevents the following deprecation warning:

```
Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition2 which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
```

fixes Shopify#11016
  • Loading branch information
schiller-manuel committed Dec 14, 2023
1 parent e197ca5 commit a20d2e1
Show file tree
Hide file tree
Showing 2 changed files with 9 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/short-buckets-push.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Fixed a console deprecation warning in SelectAllActions that occurs when using React StrictMode.
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {forwardRef} from 'react';
import React, {forwardRef, useRef} from 'react';
import {Transition} from 'react-transition-group';

import {classNames} from '../../utilities/css';
Expand Down Expand Up @@ -73,15 +73,16 @@ export const SelectAllActions = forwardRef(function SelectAllActions(
ariaLive,
ref,
};
const wrapperRef = useRef<HTMLDivElement>(null);
const markup = (
<Transition timeout={0} in={selectMode} key="markup">
<Transition timeout={0} in={selectMode} key="markup" nodeRef={wrapperRef}>
{(status: TransitionStatus) => {
const wrapperClasses = classNames(
styles.SelectAllActions,
styles[`SelectAllActions-${status}`],
);
return (
<div className={wrapperClasses}>
<div className={wrapperClasses} ref={wrapperRef}>
<CheckableButton {...checkableButtonProps} />
{paginatedSelectAllMarkup}
</div>
Expand Down

0 comments on commit a20d2e1

Please sign in to comment.