rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: set tabindex depending on overflowed tags

Browse Source
This commit is contained in:
Antonella Sgarlatta
2021-05-31 14:42:03 -03:00
parent b171e48c57
commit 70e4425e20
2 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/components/AutocompleteTagInput.tsx
View File

@@ -11,12 +11,14 @@ type Props = {
application: WebApplication; application: WebApplication;
appState: AppState; appState: AppState;
tagsRef: RefObject<HTMLButtonElement[]>; tagsRef: RefObject<HTMLButtonElement[]>;
tabIndex: number;
}; };
export const AutocompleteTagInput: FunctionalComponent<Props> = ({ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
application, application,
appState, appState,
tagsRef, tagsRef,
tabIndex,
}) => { }) => {
const [searchQuery, setSearchQuery] = useState(''); const [searchQuery, setSearchQuery] = useState('');
const [dropdownVisible, setDropdownVisible] = useState(false); const [dropdownVisible, setDropdownVisible] = useState(false);
@@ -102,6 +104,7 @@ export const AutocompleteTagInput: FunctionalComponent<Props> = ({
onChange={onSearchQueryChange} onChange={onSearchQueryChange}
type="text" type="text"
placeholder="Add tag" placeholder="Add tag"
tabIndex={tabIndex}
onBlur={closeOnBlur} onBlur={closeOnBlur}
onFocus={showDropdown} onFocus={showDropdown}
onKeyUp={(event) => { onKeyUp={(event) => {

4
app/assets/javascripts/components/NoteTags.tsx
View File

@@ -99,6 +99,8 @@ const NoteTags = observer(({ application, appState }: Props) => {
const tagClass = `bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center const tagClass = `bg-contrast border-0 rounded text-xs color-text py-1 pr-2 flex items-center
mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`; mt-2 mr-2 cursor-pointer hover:bg-secondary-contrast focus:bg-secondary-contrast`;
const overflowedTags = tagsContainerCollapsed && overflowCount > 0;
return ( return (
<div className="flex" style={{ height: tagsContainerHeight }}> <div className="flex" style={{ height: tagsContainerHeight }}>
<div <div
@@ -126,6 +128,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
onTagBackspacePress(tag); onTagBackspacePress(tag);
} }
}} }}
tabIndex={isTagOverflowed(tagsRef.current[index]) ? -1 : 0}
> >
<Icon <Icon
type="hashtag" type="hashtag"
@@ -140,6 +143,7 @@ const NoteTags = observer(({ application, appState }: Props) => {
application={application} application={application}
appState={appState} appState={appState}
tagsRef={tagsRef} tagsRef={tagsRef}
tabIndex={overflowedTags ? -1 : 0}
/> />
</div> </div>
{overflowCount > 1 && tagsContainerCollapsed && ( {overflowCount > 1 && tagsContainerCollapsed && (