fix: Safary and Negative TabIndex, #33

theKashey · Jul 15, 2018 · f4a6a6d · f4a6a6d
1 parent c3c04c1
commit f4a6a6d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/src/Trap.js b/src/Trap.js
@@ -30,7 +30,9 @@ const activateTrap = () => {
       if (
         workingNode &&
         !(focusInside(workingNode) ||
-          focusIsPortaledPair(activeElement, workingNode))
+          focusIsPortaledPair(activeElement, workingNode) ||
+          (workingNode.contains && workingNode.contains(activeElement))
+        )
       ) {
         onActivation();
         if (document && !lastActiveFocus && activeElement && !autoFocus) {

diff --git a/stories/TextSelection.js b/stories/TextSelection.js
@@ -31,8 +31,10 @@ class Trap extends Component {
         <br/>
         <br/>
         Some text
+        {this.props.children}
         <input placeholder="input2"/>
         <input placeholder="input3"/> <br/>
+        { Array(100).fill(1).map(x => <div>{x}---</div>)}
         Some text
         <button>A BUTTON</button>
       </FocusLock>
@@ -62,8 +64,25 @@ const TextSelectionDisabled = () =>
     <input placeholder="input1"/>
   </div>;
 
+const TextSelectionTabIndexEnabled = () =>
+  <div style={styles}>
+    <input placeholder="input1"/>
+    Some text
+    <div style={bg}>
+      <Trap allowTextSelection>
+        <div tabIndex={-1}>
+          test
+          <input />
+          set
+        </div>
+      </Trap>
+    </div>
+    Some text
+    <input placeholder="input1"/>
+  </div>;
 
 export {
   TextSelectionEnabled,
-  TextSelectionDisabled
+  TextSelectionDisabled,
+  TextSelectionTabIndexEnabled,
 }
diff --git a/stories/index.js b/stories/index.js
@@ -10,7 +10,7 @@ import TabIndex from './TabIndex';
 import AutoFocus from './Autofocus';
 import ReturnFocus from './ReturnFocus';
 import {Trap1, Trap2, Trap3, Trap4} from './Checkboxes';
-import {TextSelectionEnabled, TextSelectionDisabled} from './TextSelection';
+import {TextSelectionEnabled, TextSelectionDisabled, TextSelectionTabIndexEnabled} from './TextSelection';
 import JumpCase from './Jump';
 import GroupCase from './Group';
 import PortalCase from './Portal';
@@ -38,7 +38,8 @@ storiesOf('Checkboxes', module)
 
 storiesOf('Text selection', module)
   .add('enabled', () => <Frame><TextSelectionEnabled/></Frame>)
-  .add('disabled', () => <Frame><TextSelectionDisabled/></Frame>);
+  .add('disabled', () => <Frame><TextSelectionDisabled/></Frame>)
+  .add('tabindex -1', () => <Frame><TextSelectionTabIndexEnabled/></Frame>);
 
 storiesOf('Jump', module)
   .add('jump', () => <Frame><JumpCase /></Frame>);