dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

Remove the isLazy focus-management hack from PosePicker

Browse source 
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:
Emi Matchu 2024-02-01 06:53:32 -08:00
parent 00bc9c3bf7
commit c13c6e7bd8
1 changed files with 7 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/javascript/wardrobe-2020/WardrobePage/PosePicker.js
View file

@ -219,11 +219,6 @@ function PosePicker({
gap="2"
index={tabIndex}
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">
<Tab width="50%">Expressions</Tab>
@ -237,7 +232,9 @@ function PosePicker({
colorId={colorId}
pose={pose}
appearanceId={appearanceId}
initialFocusRef={initialFocusRef}
initialFocusRef={
tabIndex === 0 ? initialFocusRef : null
}
dispatchToOutfit={dispatchToOutfit}
/>
) : (
@ -245,7 +242,9 @@ function PosePicker({
<PosePickerTable
poseInfos={poseInfos}
onChange={onChangePose}
initialFocusRef={initialFocusRef}
initialFocusRef={
tabIndex === 0 ? initialFocusRef : null
}
/>
{numStandardPoses == 0 && (
<PosePickerEmptyExplanation />
@ -266,7 +265,7 @@ function PosePicker({
selectedStyleId={altStyleId}
altStyles={altStyles}
onChange={onChangeStyle}
initialFocusRef={initialFocusRef}
initialFocusRef={tabIndex === 1 ? initialFocusRef : null}
/>
<StyleExplanation />
</TabPanel>