From 69ff5f0e9850798cf0f717c4e88ae5f32f805a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nishan=20=28o=5E=E2=96=BD=5Eo=29?= <nishanbende@gmail.com>
Date: Wed, 2 Mar 2022 16:10:41 +0530
Subject: [PATCH] fix#1471: every element is focusable on web (#1585)

As described in #1471, each SVG element is focusable/tabable on web by default. This can create issues in keyboard navigation.
As explained by @jondkoon #1471 (comment), the TouchableMixin attaches blur handler which makes SVG elements focusable.

So, to solve this, we only attach touchable mixin handlers if the element has any touchable props.
---
 src/ReactNativeSVG.web.ts | 14 +++++++-------
 src/lib/util.ts           |  6 ++++++
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/ReactNativeSVG.web.ts b/src/ReactNativeSVG.web.ts
index 52b56401..e5be9939 100644
--- a/src/ReactNativeSVG.web.ts
+++ b/src/ReactNativeSVG.web.ts
@@ -10,6 +10,7 @@ import {
 import { NumberArray, NumberProp } from './lib/extract/types';
 import SvgTouchableMixin from './lib/SvgTouchableMixin';
 import { resolve } from './lib/resolve';
+import { getHasTouchableProperty } from './lib/util';
 
 const createElement = cE || ucE;
 
@@ -87,15 +88,10 @@ const prepare = <T extends BaseProps>(
     fontStyle,
     style,
     forwardedRef,
-    onPress,
-    onPressIn,
-    onPressOut,
-    onLongPress,
     // @ts-ignore
     ...rest
   } = props;
-  const hasTouchableProperty =
-    onPress || onPressIn || onPressOut || onLongPress;
+  const hasTouchableProperty = getHasTouchableProperty(props);
   const clean: {
     onStartShouldSetResponder?: (e: GestureResponderEvent) => boolean;
     onResponderMove?: (e: GestureResponderEvent) => void;
@@ -245,7 +241,11 @@ export class WebShape<
   ) => boolean;
   constructor(props: P, context: C) {
     super(props, context);
-    SvgTouchableMixin(this);
+    const hasTouchableProperty = getHasTouchableProperty(props);
+  
+    // Do not attach touchable mixin handlers if SVG element doesn't have a touchable prop
+    if (hasTouchableProperty) SvgTouchableMixin(this);
+    
     this._remeasureMetricsOnActivation = remeasure.bind(this);
   }
 }
diff --git a/src/lib/util.ts b/src/lib/util.ts
index 968e2a3c..5b3e1dff 100644
--- a/src/lib/util.ts
+++ b/src/lib/util.ts
@@ -11,4 +11,10 @@ export function pickNotNil(object: { [prop: string]: unknown }) {
   return result;
 }
 
+export const getHasTouchableProperty = (props: any) => {
+  return (
+    props.onPress || props.onPressIn || props.onPressOut || props.onLongPress
+  );
+};
+
 export const idPattern = /#([^)]+)\)?$/;