Allow focus to remain on the targets of hash links when the element navigated to should be focusable:

1. natively focusable elements (a, input, textarea, select, button)
2. elements where the target had a tabindex prior to the navigation event

This change allows consumers of react-router-hash-link to apply focus styles to the target element.

Author: Mike Lumetta

src/index.js

@@ -16,6 +16,11 @@ function reset() {
   }
 }
 
+function isInteractiveElement(element) {
+  const interactiveTags = ['A', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'];
+  return interactiveTags.includes(element.tagName) && !element.hasAttribute('disabled');
+}
+
 function getElAndScroll() {
   let element = null;
   if (hashFragment === '#') {
@@ -43,11 +48,16 @@ function getElAndScroll() {
     let originalTabIndex = element.getAttribute('tabindex');
     if (originalTabIndex === null) element.setAttribute('tabindex', -1);
     element.focus({ preventScroll: true });
-    // for some reason calling blur() in safari resets the focus region to where it was previously,
-    // if blur() is not called it works in safari, but then are stuck with default focus styles
-    // on an element that otherwise might never had focus styles applied, so not an option
-    element.blur();
-    if (originalTabIndex === null) element.removeAttribute('tabindex');
+    if (originalTabIndex === null) {
+      if (!isInteractiveElement(element)) {
+        // for some reason calling blur() in safari resets the focus region to where it was previously,
+        // if blur() is not called it works in safari, but then are stuck with default focus styles
+        // on an element that otherwise might never had focus styles applied, so not an option
+        element.blur();
+      }
+
+      element.removeAttribute('tabindex');
+    }
 
     reset();
     return true;