Skip to content

fix(frontend): fix autofocus on author editor step #82

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
germanurrus merged 3 commits into from
Jun 28, 2022
Merged

fix(frontend): fix autofocus on author editor step #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5c90517
fix autofocus
germanurrus Jun 28, 2022
a0733e4
Merge branch 'main' into cas-110
germanurrus Jun 28, 2022
cdee910
use Ref for first element
germanurrus Jun 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion frontend/packages/client/src/components/Community/CommunityEditorDetails.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState, useEffect } from 'react';
import React, { useState, useEffect, useRef } from 'react';
import { Bin, ValidCheckMark, InvalidCheckMark } from 'components/Svg';
import { WrapperResponsive, Loader, AddButton } from 'components';
import { useCommunityUsers } from 'hooks';
Expand All @@ -23,8 +23,17 @@ export const CommunityUsersForm = ({
submitComponent,
validateEachAddress = false,
onClearField = () => {},
autoFocusOnLoad = false,
} = {}) => {
const canDeleteAddress = addrList.length > 1;

const refOnFirstInput = useRef();

useEffect(() => {
if (refOnFirstInput.current) {
refOnFirstInput.current.focus();
}
}, [refOnFirstInput]);
return (
<div className="border-light rounded-lg columns is-flex-direction-column is-mobile m-0 p-6 mb-6 p-4-mobile mb-4-mobile">
<div className="columns flex-1">
Expand Down Expand Up @@ -80,6 +89,11 @@ export const CommunityUsersForm = ({
width: '100%',
...(isInvalid ? {} : undefined),
}}
ref={
addrList.length === 1 && addr === '' && autoFocusOnLoad
? refOnFirstInput
: undefined
}
Copy link
Copy Markdown
Contributor Author

@germanurrus germanurrus Jun 28, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This component is used twice in the same step so the last focus will win. For that reason using autoFocusOnLoad to enable one and disable the second one. That way the first input will keep the focus.
Screen Shot 2022-06-28 at 15 55 29

/>
<div
style={{
Expand Down
2 changes: 2 additions & 0 deletions frontend/packages/client/src/components/CommunityCreate/StepTwo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ export default function StepTwo({
label="Domain name or wallet address"
validateEachAddress
onClearField={(index) => onAdminAddressChange(index, '')}
autoFocusOnLoad={true}
/>
<CommunityUsersForm
title="Authors"
Expand All @@ -153,6 +154,7 @@ export default function StepTwo({
label="Domain name or wallet address"
validateEachAddress
onClearField={(index) => onAuthorAddressChange(index, '')}
autoFocusOnLoad={false}
/>
<div className="columns mb-5">
<div className="column is-12">
Expand Down