Skip to content

Commit

Permalink
Default behaviour no longer prevented when using tab on first/last …
Browse files Browse the repository at this point in the history 
…tag. (#212)

* Default behaviour no longer prevented when using `tab` on first/last tag
* Fixed issue with suggestions remaining open.
* Improved tabbing experience.
  • Loading branch information
@rubenthoms
rubenthoms authored Apr 4, 2022
1 parent 68e9506 commit e85418a
Show file tree
Hide file tree
Showing 2 changed files with 93 additions and 23 deletions.
2 changes: 1 addition & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
## [0.5.5] - 2022-02-09

### Changed

- [#212](https://github.com/equinor/webviz-core-components/pull/212) - Changed `tab` behaviour in `SmartNodeSelector`. When pressing `tab` on the last tag or `shift+tab` on the first one, the default behaviour is no longer prevented.
- [#197](https://github.com/equinor/webviz-core-components/pull/197) - Updated `@equinor/eds-icons` (and associated `@equinor/eds-core-react` dependencies) in order to use new icons upstream in the application menu.

## [0.5.4] - 2021-12-09
Expand Down
114 changes: 92 additions & 22 deletions react/src/lib/components/SmartNodeSelector/components/SmartNodeSelectorComponent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
protected selectedNodes: string[] | null;
protected blurEnabled: boolean;
protected updateFromWithin: boolean;
protected tabbedInFromOutside: boolean;

public state: SmartNodeSelectorStateType;
public static propTypes: Record<string, unknown>;
Expand Down Expand Up @@ -154,6 +155,7 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
this.selectedNodes = null;
this.blurEnabled = true;
this.updateFromWithin = false;
this.tabbedInFromOutside = false;

let error: string | undefined = undefined;

Expand Down Expand Up @@ -378,9 +380,11 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
): void {
if (index >= 0 && index < this.countTags()) {
if (this.state.nodeSelections.length > index && index >= 0) {
const inputField = (this.state.nodeSelections[
index
]?.getRef() as React.RefObject<HTMLInputElement>).current;
const inputField = (
this.state.nodeSelections[
index
]?.getRef() as React.RefObject<HTMLInputElement>
).current;
if (inputField) {
inputField.focus();
if (setSelection !== undefined) {
Expand All @@ -404,9 +408,8 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
}

hasLastEmptyTag(): boolean {
const lastTag = this.state.nodeSelections[
this.state.nodeSelections.length - 1
];
const lastTag =
this.state.nodeSelections[this.state.nodeSelections.length - 1];
return !(lastTag.displayAsTag() || lastTag.isValid());
}

Expand Down Expand Up @@ -588,8 +591,9 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
return;
}
if (
(this.currentNodeSelection().getRef() as React.RefObject<HTMLInputElement>)
.current === document.activeElement
(
this.currentNodeSelection().getRef() as React.RefObject<HTMLInputElement>
).current === document.activeElement
) {
this.updateState({
suggestionsVisible: true,
Expand Down Expand Up @@ -656,9 +660,9 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
letMaxNumValuesBlink(): void {
if (this.props.maxNumSelectedNodes !== 1) {
let numBlinks = 0;
const numberOfTagsDiv = (this
.refNumberOfTags as React.RefObject<HTMLDivElement>)
.current as HTMLDivElement;
const numberOfTagsDiv = (
this.refNumberOfTags as React.RefObject<HTMLDivElement>
).current as HTMLDivElement;
const blinkTimer = setInterval(() => {
numBlinks++;
if (numBlinks % 2 === 0) {
Expand All @@ -675,6 +679,19 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
}
}

containsActiveElement(): boolean {
if (
document.activeElement &&
document.activeElement instanceof HTMLElement &&
this.ref.current
) {
return this.ref.current.contains(
document.activeElement as HTMLElement
);
}
return false;
}

checkIfSelectionIsDuplicate(
nodeSelection: TreeNodeSelection,
index: number
Expand All @@ -701,9 +718,9 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
}
const domNode = (this.tagFieldRef as React.RefObject<HTMLUListElement>)
.current as HTMLUListElement;
const suggestions = (this
.suggestionsRef as React.RefObject<HTMLDivElement>)
.current as HTMLDivElement;
const suggestions = (
this.suggestionsRef as React.RefObject<HTMLDivElement>
).current as HTMLDivElement;
const eventTarget = event.target as Element;
if (
(!domNode || !domNode.contains(eventTarget)) &&
Expand Down Expand Up @@ -738,6 +755,8 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
e.stopPropagation();
} else if (e.key === "c" && e.ctrlKey) {
this.copyAllSelectedTags();
} else if (e.key === "Tab" && !this.containsActiveElement()) {
this.tabbedInFromOutside = true;
}
}

Expand Down Expand Up @@ -982,8 +1001,11 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
suggestionsVisible: false,
showAllSuggestions: false,
callback: () => {
((this.state.nodeSelections[0].getRef() as React.RefObject<HTMLInputElement>)
.current as HTMLInputElement).focus();
(
(
this.state.nodeSelections[0].getRef() as React.RefObject<HTMLInputElement>
).current as HTMLInputElement
).focus();
},
});
e.stopPropagation();
Expand Down Expand Up @@ -1119,7 +1141,8 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
nodeSelection.isValid() &&
!this.checkIfSelectionIsDuplicate(nodeSelection, i)
) {
const matchedNodePaths = nodeSelection.exactlyMatchedNodePaths();
const matchedNodePaths =
nodeSelection.exactlyMatchedNodePaths();
for (let j = 0; j < matchedNodePaths.length; j++) {
if (
selectedNodes.length >= maxNumSelectedNodes &&
Expand Down Expand Up @@ -1332,8 +1355,9 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
showAllSuggestions: true,
forceUpdate: true,
callback: () => {
const input = (this.currentNodeSelection()?.getRef() as React.RefObject<HTMLInputElement>)
?.current;
const input = (
this.currentNodeSelection()?.getRef() as React.RefObject<HTMLInputElement>
)?.current;
if (input) {
input.setSelectionRange(0, 0);
}
Expand Down Expand Up @@ -1564,11 +1588,56 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
eventType: KeyEventType
): void {
if (eventType === KeyEventType.KeyDown) {
if (this.containsActiveElement()) {
if (e.shiftKey && this.currentTagIndex() === 0) {
this.hideSuggestions({
callback: () => {
if (!this.selectionHasStarted) {
this.unselectAllTags({});

this.updateState({ currentTagIndex: -1 });
}
this.selectionHasStarted = false;
},
});
return;
}
if (
!e.shiftKey &&
this.currentTagIndex() === this.countTags() - 1
) {
this.hideSuggestions({
callback: () => {
if (!this.selectionHasStarted) {
this.unselectAllTags({});

this.updateState({ currentTagIndex: -1 });
}
this.selectionHasStarted = false;
},
});
return;
}

if (e.shiftKey) {
this.decrementCurrentTagIndex(() => this.focusCurrentTag());
} else {
this.incrementCurrentTagIndex(() => this.focusCurrentTag());
}
}
} else if (this.tabbedInFromOutside) {
if (e.shiftKey) {
this.decrementCurrentTagIndex(() => this.focusCurrentTag());
this.updateState({
currentTagIndex: this.countTags() - 1,
callback: () => this.focusCurrentTag(Direction.Right),
});
} else {
this.incrementCurrentTagIndex(() => this.focusCurrentTag());
this.updateState({
currentTagIndex: 0,
callback: () => this.focusCurrentTag(Direction.Right),
});
}
this.tabbedInFromOutside = false;
}
e.preventDefault();
}
Expand Down Expand Up @@ -1873,7 +1942,8 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
className={classNames({
SmartNodeSelector: true,
"SmartNodeSelector--frameless": frameless,
"SmartNodeSelector--SuggestionsActive": suggestionsVisible,
"SmartNodeSelector--SuggestionsActive":
suggestionsVisible,
"SmartNodeSelector--Invalid":
maxNumSelectedNodes > 0 &&
this.countValidSelections() > maxNumSelectedNodes,
Expand Down

0 comments on commit e85418a

Please sign in to comment.