Prevent Selection Sync From Stealing Focus (#118)

Prevent Selection Sync From Stealing Focus Fixes #117

Author: jameskerr

.gitignore

@@ -34,3 +34,4 @@ yarn-error.log*
 !.yarn/versions
 
 .parcel-cache
+.vscode

packages/e2e/cypress/e2e/cities-spec.cy.ts

@@ -0,0 +1,11 @@
+describe("Testing the Cities Demo", () => {
+  beforeEach(() => {
+    cy.visit("http://localhost:3000/cities");
+  });
+
+  it("Does not steel the selection when the selection prop changes", () => {
+    cy.get("button").contains("Select San Francisco").click();
+    cy.focused().invoke("is", "button").should("equal", true);
+    cy.focused().should("have.text", "Select San Francisco");
+  });
+});

packages/react-arborist/src/components/provider.tsx

@@ -65,7 +65,7 @@ export function TreeProvider<T>({
   /* Change selection based on props */
   useEffect(() => {
     if (api.props.selection) {
-      api.select(api.props.selection);
+      api.select(api.props.selection, { focus: false });
     } else {
       api.deselectAll();
     }

packages/react-arborist/src/interfaces/tree-api.ts

@@ -323,15 +323,18 @@ export class TreeApi<T> {
     this.focus(this.at(index));
   }
 
-  select(node: Identity, opts: { align?: Align } = {}) {
+  select(node: Identity, opts: { align?: Align; focus?: boolean } = {}) {
     if (!node) return;
+    const changeFocus = opts.focus !== false;
     const id = identify(node);
-    this.dispatch(focus(id));
+    if (changeFocus) this.dispatch(focus(id));
     this.dispatch(selection.only(id));
     this.dispatch(selection.anchor(id));
     this.dispatch(selection.mostRecent(id));
     this.scrollTo(id, opts.align);
-    if (this.focusedNode) safeRun(this.props.onFocus, this.focusedNode);
+    if (this.focusedNode && changeFocus) {
+      safeRun(this.props.onFocus, this.focusedNode);
+    }
     safeRun(this.props.onSelect, this.selectedNodes);
   }