Skip to content

Commit

Permalink
fix: hydration problem caused by isAppleDevice
Browse files Browse the repository at this point in the history
  • Loading branch information
zhouhua committed Feb 6, 2024
1 parent 06e3488 commit 35de3a1
Showing 1 changed file with 9 additions and 4 deletions.
13 changes: 9 additions & 4 deletions packages/react-select/src/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,7 @@ interface State<
inputIsHiddenAfterUpdate: boolean | null | undefined;
prevProps: Props<Option, IsMulti, Group> | void;
instancePrefix: string;
isAppleDevice: boolean;
}

interface CategorizedOption<Option> {
Expand Down Expand Up @@ -643,6 +644,7 @@ export default class Select<
inputIsHiddenAfterUpdate: undefined,
prevProps: undefined,
instancePrefix: '',
isAppleDevice: false,
};

// Misc. Instance Properties
Expand All @@ -656,7 +658,6 @@ export default class Select<
openAfterFocus = false;
scrollToFocusedOptionOnUpdate = false;
userIsDragging?: boolean;
isAppleDevice = isAppleDevice();

// Refs
// ------------------------------
Expand Down Expand Up @@ -814,6 +815,10 @@ export default class Select<
) {
scrollIntoView(this.menuListRef, this.focusedOptionRef);
}
if (isAppleDevice()) {
// eslint-disable-next-line react/no-did-mount-set-state
this.setState({ isAppleDevice: true });
}
}
componentDidUpdate(prevProps: Props<Option, IsMulti, Group>) {
const { isDisabled, menuIsOpen } = this.props;
Expand Down Expand Up @@ -1721,7 +1726,7 @@ export default class Select<
'aria-labelledby': this.props['aria-labelledby'],
'aria-required': required,
role: 'combobox',
'aria-activedescendant': this.isAppleDevice
'aria-activedescendant': this.state.isAppleDevice
? undefined
: this.state.focusedOptionId || '',

Expand Down Expand Up @@ -1992,7 +1997,7 @@ export default class Select<
onMouseOver: onHover,
tabIndex: -1,
role: 'option',
'aria-selected': this.isAppleDevice ? undefined : isSelected, // is not supported on Apple devices
'aria-selected': this.state.isAppleDevice ? undefined : isSelected, // is not supported on Apple devices
};

return (
Expand Down Expand Up @@ -2185,7 +2190,7 @@ export default class Select<
isFocused={isFocused}
selectValue={selectValue}
focusableOptions={focusableOptions}
isAppleDevice={this.isAppleDevice}
isAppleDevice={this.state.isAppleDevice}
/>
);
}
Expand Down

0 comments on commit 35de3a1

Please sign in to comment.