Remove the isLazy focus-management hack from PosePicker
Now that we're tracking tab state ourselves, it's pretty easy to just pass the `initialFocusRef` to the right place instead of to both! This helps switching between the tabs feel a lot smoother, because we don't have to re-render and fade-in all the poses again.
This commit is contained in:
parent
00bc9c3bf7
commit
c13c6e7bd8
1 changed files with 7 additions and 8 deletions
|
@ -219,11 +219,6 @@ function PosePicker({
|
||||||
gap="2"
|
gap="2"
|
||||||
index={tabIndex}
|
index={tabIndex}
|
||||||
onChange={setTabIndex}
|
onChange={setTabIndex}
|
||||||
// HACK: To only apply `initialFocusRef` to the selected input
|
|
||||||
// in the *active* tab, we just use `isLazy` to only *render*
|
|
||||||
// the active tab. We could also watch the tab state and set
|
|
||||||
// the ref accordingly!
|
|
||||||
isLazy
|
|
||||||
>
|
>
|
||||||
<TabList paddingX="2" paddingY="0">
|
<TabList paddingX="2" paddingY="0">
|
||||||
<Tab width="50%">Expressions</Tab>
|
<Tab width="50%">Expressions</Tab>
|
||||||
|
@ -237,7 +232,9 @@ function PosePicker({
|
||||||
colorId={colorId}
|
colorId={colorId}
|
||||||
pose={pose}
|
pose={pose}
|
||||||
appearanceId={appearanceId}
|
appearanceId={appearanceId}
|
||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={
|
||||||
|
tabIndex === 0 ? initialFocusRef : null
|
||||||
|
}
|
||||||
dispatchToOutfit={dispatchToOutfit}
|
dispatchToOutfit={dispatchToOutfit}
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
|
@ -245,7 +242,9 @@ function PosePicker({
|
||||||
<PosePickerTable
|
<PosePickerTable
|
||||||
poseInfos={poseInfos}
|
poseInfos={poseInfos}
|
||||||
onChange={onChangePose}
|
onChange={onChangePose}
|
||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={
|
||||||
|
tabIndex === 0 ? initialFocusRef : null
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
{numStandardPoses == 0 && (
|
{numStandardPoses == 0 && (
|
||||||
<PosePickerEmptyExplanation />
|
<PosePickerEmptyExplanation />
|
||||||
|
@ -266,7 +265,7 @@ function PosePicker({
|
||||||
selectedStyleId={altStyleId}
|
selectedStyleId={altStyleId}
|
||||||
altStyles={altStyles}
|
altStyles={altStyles}
|
||||||
onChange={onChangeStyle}
|
onChange={onChangeStyle}
|
||||||
initialFocusRef={initialFocusRef}
|
initialFocusRef={tabIndex === 1 ? initialFocusRef : null}
|
||||||
/>
|
/>
|
||||||
<StyleExplanation />
|
<StyleExplanation />
|
||||||
</TabPanel>
|
</TabPanel>
|
||||||
|
|
Loading…
Reference in a new issue