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

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

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