OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

focus dropdown when opening support pose picker

Browse source 
Oops, opening the dropdown would auto-focus the left arrow button, because it's now the first focusable element! Make explicit that we want the dropdown instead.
This commit is contained in:
Emi Matchu 2020-08-31 01:32:25 -07:00
parent 214a93008b
commit 64ad77ec49
2 changed files with 15 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/app/WardrobePage/PosePicker.js
View file

@ -63,7 +63,7 @@ function PosePicker({
onUnlockFocus, onUnlockFocus,
}) { }) {
const theme = useTheme(); const theme = useTheme();
const checkedInputRef = React.useRef(); const initialFocusRef = React.useRef();
const { loading, error, poseInfos } = usePoses(speciesId, colorId, pose); const { loading, error, poseInfos } = usePoses(speciesId, colorId, pose);
const [isInSupportMode, setIsInSupportMode] = useLocalStorage( const [isInSupportMode, setIsInSupportMode] = useLocalStorage(
"DTIPosePickerIsInSupportMode", "DTIPosePickerIsInSupportMode",
@ -111,7 +111,7 @@ function PosePicker({
returnFocusOnClose returnFocusOnClose
onOpen={onLockFocus} onOpen={onLockFocus}
onClose={onUnlockFocus} onClose={onUnlockFocus}
initialFocusRef={checkedInputRef} initialFocusRef={initialFocusRef}
> >
{({ isOpen }) => ( {({ isOpen }) => (
<> <>
@ -166,6 +166,7 @@ function PosePicker({
colorId={colorId} colorId={colorId}
pose={pose} pose={pose}
appearanceId={appearanceId} appearanceId={appearanceId}
initialFocusRef={initialFocusRef}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
/> />
) : ( ) : (
@ -173,7 +174,7 @@ function PosePicker({
<PosePickerTable <PosePickerTable
poseInfos={poseInfos} poseInfos={poseInfos}
onChange={onChange} onChange={onChange}
checkedInputRef={checkedInputRef} initialFocusRef={initialFocusRef}
/> />
{numAvailablePoses <= 1 && ( {numAvailablePoses <= 1 && (
<SupportOnly> <SupportOnly>
@ -210,7 +211,7 @@ function PosePicker({
); );
} }
function PosePickerTable({ poseInfos, onChange, checkedInputRef }) { function PosePickerTable({ poseInfos, onChange, initialFocusRef }) {
return ( return (
<table width="100%"> <table width="100%">
<thead> <thead>
@ -236,21 +237,21 @@ function PosePickerTable({ poseInfos, onChange, checkedInputRef }) {
<PoseOption <PoseOption
poseInfo={poseInfos.happyMasc} poseInfo={poseInfos.happyMasc}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.happyMasc.isSelected && checkedInputRef} inputRef={poseInfos.happyMasc.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseOption <PoseOption
poseInfo={poseInfos.sadMasc} poseInfo={poseInfos.sadMasc}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.sadMasc.isSelected && checkedInputRef} inputRef={poseInfos.sadMasc.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseOption <PoseOption
poseInfo={poseInfos.sickMasc} poseInfo={poseInfos.sickMasc}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.sickMasc.isSelected && checkedInputRef} inputRef={poseInfos.sickMasc.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
</tr> </tr>
@ -262,21 +263,21 @@ function PosePickerTable({ poseInfos, onChange, checkedInputRef }) {
<PoseOption <PoseOption
poseInfo={poseInfos.happyFem} poseInfo={poseInfos.happyFem}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.happyFem.isSelected && checkedInputRef} inputRef={poseInfos.happyFem.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseOption <PoseOption
poseInfo={poseInfos.sadFem} poseInfo={poseInfos.sadFem}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.sadFem.isSelected && checkedInputRef} inputRef={poseInfos.sadFem.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
<Cell as="td"> <Cell as="td">
<PoseOption <PoseOption
poseInfo={poseInfos.sickFem} poseInfo={poseInfos.sickFem}
onChange={onChange} onChange={onChange}
inputRef={poseInfos.sickFem.isSelected && checkedInputRef} inputRef={poseInfos.sickFem.isSelected && initialFocusRef}
/> />
</Cell> </Cell>
</tr> </tr>

4
src/app/WardrobePage/support/PosePickerSupport.js
View file

@ -17,6 +17,7 @@ function PosePickerSupport({
colorId, colorId,
pose, pose,
appearanceId, appearanceId,
initialFocusRef,
dispatchToOutfit, dispatchToOutfit,
}) { }) {
const { loading, error, data } = useQuery( const { loading, error, data } = useQuery(
@ -108,6 +109,7 @@ function PosePickerSupport({
petAppearances={data.petAppearances} petAppearances={data.petAppearances}
currentPetAppearance={currentPetAppearance} currentPetAppearance={currentPetAppearance}
canonicalAppearanceIds={canonicalAppearanceIds} canonicalAppearanceIds={canonicalAppearanceIds}
dropdownRef={initialFocusRef}
dispatchToOutfit={dispatchToOutfit} dispatchToOutfit={dispatchToOutfit}
/> />
<Metadata <Metadata
@ -143,6 +145,7 @@ function PosePickerSupportNavigator({
petAppearances, petAppearances,
currentPetAppearance, currentPetAppearance,
canonicalAppearanceIds, canonicalAppearanceIds,
dropdownRef,
dispatchToOutfit, dispatchToOutfit,
}) { }) {
const currentIndex = petAppearances.indexOf(currentPetAppearance); const currentIndex = petAppearances.indexOf(currentPetAppearance);
@ -175,6 +178,7 @@ function PosePickerSupportNavigator({
size="sm" size="sm"
width="auto" width="auto"
value={currentPetAppearance.id} value={currentPetAppearance.id}
ref={dropdownRef}
onChange={(e) => { onChange={(e) => {
const id = e.target.value; const id = e.target.value;
const petAppearance = petAppearances.find((pa) => pa.id === id); const petAppearance = petAppearances.find((pa) => pa.id === id);