From 917ed28dc44ca8c3dffa0cb4579f07f166b6b2df Mon Sep 17 00:00:00 2001
From: Hrusikesh Panda <mrchief_2000@yahoo.com>
Date: Sat, 18 Jan 2020 19:52:23 -0500
Subject: [PATCH] fix: Append clientId to tag, remove button to make them
 unique

Currently, having multiple component instances on same page renders same remove-button, tag ids.

Fixes #315
---
 __snapshots__/src/tag/index.test.js.md   |   6 +++---
 __snapshots__/src/tag/index.test.js.snap | Bin 424 -> 429 bytes
 src/index.js                             |   8 ++++++--
 src/index.keyboardNav.test.js            |   6 +++---
 src/index.test.js                        |   4 ++--
 src/tag/index.js                         |   9 +++++----
 src/tag/index.test.js                    |  12 ++++++------
 src/tags/index.js                        |   8 +++++---
 src/tree-manager/keyboardNavigation.js   |   6 +++---
 src/trigger/index.js                     |   2 +-
 10 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/__snapshots__/src/tag/index.test.js.md b/__snapshots__/src/tag/index.test.js.md
index 4cba7e93..f368d636 100644
--- a/__snapshots__/src/tag/index.test.js.md
+++ b/__snapshots__/src/tag/index.test.js.md
@@ -11,14 +11,14 @@ Generated by [AVA](https://ava.li).
     <span
       "aria-label"="hello"
       className="tag"
-      id="abc_tag"
+      id="rdts_abc_tag"
     >
       hello
       <button
         "aria-label"="Remove"
-        "aria-labelledby"="abc_button abc_tag"
+        "aria-labelledby"="rdts_abc_button rdts_abc_tag"
         className="tag-remove"
-        id="abc_button"
+        id="rdts_abc_button"
         onClick={Function {}}
         onKeyDown={Function {}}
         onKeyUp={Function {}}
diff --git a/__snapshots__/src/tag/index.test.js.snap b/__snapshots__/src/tag/index.test.js.snap
index a42c0f4768f1007ab5238036ebf6992ede723dc9..31d6540c5e46eeb38a167db619aaadd246078300 100644
GIT binary patch
literal 429
zcmV;e0aE@!RzV<BZeeh9Xm4~Nb}|YA0MBPcTb^j|-*E2m+%|LAjUS5$00000000Ax
zk-tjAP!xyHNt*Pp=7zcy6gnul6!94<E`oyKQiO7oUfa~$B(!O3oy1*G+}&MVoWwqa
zvy(62J9v_knntAtK1lBQ4(I%CssMoSvia2Ab#`)%t%tkDboz!6KHDmQ3LBw;CNe(a
zHD3<fj$7*sZU?9!64^5nBymmL5ck9@@j;YPV<u(>K6edPM%_gH$m$Ae#`!B_24DeD
z0W4920&A!OY9?wOA*BacM9gBi1mFsUH6zqwtHApXuSsqRnQmP0^0wrI!6EO7_(TnO
zJ0&SjD}F8YTfv~oExSotl(cBk79HY}xFQ~jPokm#)QMAKOx!AQa@`sRftSv%{K$^!
z?06A{%`FeBAB&zh5-HL67NuxellXjno@%yPHJNhhjTK0upa09e#Kjq@5rC_R&vYfR
zkoDZUbnNq}@SZ5-J@-IN_Pp_|hfb3{R66lfV>7|TpKqtf^D3cYLUiZ3{h@0Ij_0D9
X_+X6vrDgu7X^Ywy`&;^DNCN->0>{pu

literal 424
zcmV;Z0ayM(RzV<BZeeh9Xm4~Nb}|YA0Aqp3pP78^ErXYrKy272B_E3j00000000Ax
zk<UuQKoEy#k|u3aH5=QD2cZW&mf|xgA_xkCmx9P9U2Ez#32jm>dh+f;yz9lYcd=*B
zK7sfGzJrt0^iNc3;DgQXH<|rSssMoSy!O=IaO;J}`u%NVIDA8hpNa~g!fI@wg^c%k
zEs#;m^=e(goe&j7B7Z`HB(8}Y;*NMBK8P}E%)(qR;GW6Ks9UJ-+igL`I9@Vl0vdn{
z-~tsWP(c+?vrsz~Qu=_UxJ`Tsz(t79%veh;gLhqCliU_ETR7tt9m#vWJ>C)NjvDe-
zMpE2ny3BLiIVK|sSvsN%I7CET5|6|?VJHA~Vux^uD<uuB+ff+$+1SdD*qDut7fH^-
z{G9rM==gn+5zUDxMbjRn`^#~l(WR>2+2)SOAc_9=FI}c4WlTN{xP<sXGZ;_N_co>L
zoFxaZQwK%g+ZBT?|9n*QIa@<Vhe4)eE*u2oi|J{<l~}PL8FFDe@|@81JyfS&7-N5F
Sx&LX}to8*%&!rSJ0{{T5_r%%&

diff --git a/src/index.js b/src/index.js
index 28a9c279..6668016e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -153,11 +153,15 @@ class DropdownTreeSelect extends Component {
   }
 
   onTagRemove = (id, isKeyboardEvent) => {
-    const { tags: prevTags } = this.state
+    const {
+      clientId,
+      searchInput,
+      state: { tags: prevTags },
+    } = this
     this.onCheckboxChange(id, false, tags => {
       if (!isKeyboardEvent) return
 
-      keyboardNavigation.getNextFocusAfterTagDelete(id, prevTags, tags, this.searchInput).focus()
+      keyboardNavigation.getNextFocusAfterTagDelete({ id, prevTags, tags, fallback: searchInput, clientId }).focus()
     })
   }
 
diff --git a/src/index.keyboardNav.test.js b/src/index.keyboardNav.test.js
index f484b908..c5cfb119 100644
--- a/src/index.keyboardNav.test.js
+++ b/src/index.keyboardNav.test.js
@@ -134,15 +134,15 @@ test('can select with enter on keyboardNavigation', t => {
 
 test('can delete tags with backspace/delete on keyboardNavigation', t => {
   const data = [{ ...node('a', 'a'), checked: true }, { ...node('b', 'b'), checked: true }]
-  const wrapper = mount(<DropdownTreeSelect data={data} />)
+  const wrapper = mount(<DropdownTreeSelect id="rdts" data={data} />)
   const event = {
     type: 'keydown',
     stopPropagation: spy(),
     nativeEvent: { stopImmediatePropagation: spy() },
   }
-  wrapper.find('#a_tag > .tag-remove').simulate('keyDown', { ...event, key: 'Backspace' })
+  wrapper.find('#rdts_a_tag > .tag-remove').simulate('keyDown', { ...event, key: 'Backspace' })
   t.deepEqual(wrapper.state().tags.length, 1)
-  wrapper.find('#b_tag > .tag-remove').simulate('keyUp', { ...event, key: 'Delete' })
+  wrapper.find('#rdts_b_tag > .tag-remove').simulate('keyUp', { ...event, key: 'Delete' })
   t.deepEqual(wrapper.state().tags.length, 0)
 })
 
diff --git a/src/index.test.js b/src/index.test.js
index adcdd1e9..e62f5fd2 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -301,7 +301,7 @@ test('appends selected tags to aria-labelledby with provided aria-labelledby', t
   const { tree } = t.context
   tree[0].checked = true
   const wrapper = mount(<DropdownTreeSelect id="rdts" data={tree} texts={{ label: '#hello #world' }} />)
-  t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-labelledby'), 'hello world rdts-0_tag')
+  t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-labelledby'), 'hello world rdts_rdts-0_tag')
   t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-label'), undefined)
 })
 
@@ -309,6 +309,6 @@ test('appends selected tags to aria-labelledby with text label', t => {
   const { tree } = t.context
   tree[0].checked = true
   const wrapper = mount(<DropdownTreeSelect id="rdts" data={tree} texts={{ label: 'hello world' }} />)
-  t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-labelledby'), 'rdts_trigger rdts-0_tag')
+  t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-labelledby'), 'rdts_trigger rdts_rdts-0_tag')
   t.deepEqual(wrapper.find('.dropdown-trigger').prop('aria-label'), 'hello world')
 })
diff --git a/src/tag/index.js b/src/tag/index.js
index a0e9ce44..8b4786f8 100644
--- a/src/tag/index.js
+++ b/src/tag/index.js
@@ -3,11 +3,12 @@ import React, { PureComponent } from 'react'
 
 import './index.css'
 
-export const getTagId = id => `${id}_tag`
+export const getTagId = ({ id, clientId }) => `${clientId}_${id}_tag`
 
 class Tag extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
+    clientId: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     onDelete: PropTypes.func,
     readOnly: PropTypes.bool,
@@ -37,10 +38,10 @@ class Tag extends PureComponent {
   }
 
   render() {
-    const { id, label, labelRemove = 'Remove', readOnly, disabled } = this.props
+    const { id, label, labelRemove = 'Remove', readOnly, disabled, clientId } = this.props
 
-    const tagId = getTagId(id)
-    const buttonId = `${id}_button`
+    const tagId = getTagId({ id, clientId })
+    const buttonId = `${clientId}_${id}_button`
     const className = ['tag-remove', readOnly && 'readOnly', disabled && 'disabled'].filter(Boolean).join(' ')
     const isDisabled = readOnly || disabled
 
diff --git a/src/tag/index.test.js b/src/tag/index.test.js
index 9c9534e4..79c37de4 100644
--- a/src/tag/index.test.js
+++ b/src/tag/index.test.js
@@ -9,13 +9,13 @@ import Tag from './index'
 const mockEvent = { nativeEvent: { stopImmediatePropagation: spy() } }
 
 test('renders label when passed in', t => {
-  const wrapper = toJson(shallow(<Tag label="hello" id="abc" />))
+  const wrapper = toJson(shallow(<Tag label="hello" clientId="rdts" id="abc" />))
   t.snapshot(wrapper)
 })
 
 test('call stopPropagation and stopImmediatePropagation when pill is closed', t => {
   const onDelete = spy()
-  const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} />)
+  const wrapper = mount(<Tag label="hello" clientId="rdts" id="abc" onDelete={onDelete} />)
   const event = {
     type: 'click',
     stopPropagation: spy(),
@@ -28,21 +28,21 @@ test('call stopPropagation and stopImmediatePropagation when pill is closed', t
 
 test('call onDelete handler when pill is closed', t => {
   const onDelete = spy()
-  const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} />)
+  const wrapper = mount(<Tag label="hello" clientId="rdts" id="abc" onDelete={onDelete} />)
   wrapper.find('.tag-remove').simulate('click', mockEvent)
   t.true(onDelete.calledWith('abc'))
 })
 
 test('should not call onDelete when readOnly', t => {
   const onDelete = spy()
-  const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} readOnly />)
+  const wrapper = mount(<Tag label="hello" clientId="rdts" id="abc" onDelete={onDelete} readOnly />)
   wrapper.find('.tag-remove').simulate('click', mockEvent)
   t.true(onDelete.notCalled)
 })
 
 test('should not call onDelete when disabled', t => {
   const onDelete = spy()
-  const wrapper = mount(<Tag label="hello" id="abc" onDelete={onDelete} disabled />)
+  const wrapper = mount(<Tag label="hello" clientId="rdts" id="abc" onDelete={onDelete} disabled />)
   wrapper.find('.tag-remove').simulate('click', mockEvent)
   t.true(onDelete.notCalled)
 })
@@ -52,7 +52,7 @@ test('should not cause form submit', t => {
   const onDelete = spy()
   const wrapper = mount(
     <form onSubmit={onSubmit}>
-      <Tag label="hello" id="abc" onDelete={onDelete} />
+      <Tag label="hello" clientId="rdts" id="abc" onDelete={onDelete} />
     </form>
   )
   wrapper.find('.tag-remove').simulate('click', mockEvent)
diff --git a/src/tags/index.js b/src/tags/index.js
index b467e67a..a5892808 100644
--- a/src/tags/index.js
+++ b/src/tags/index.js
@@ -5,7 +5,7 @@ import { getDataset } from '../utils'
 
 import './index.css'
 
-const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
+const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove, clientId) =>
   tags.map(tag => {
     const { _id, label, tagClassName, dataset } = tag
     return (
@@ -17,6 +17,7 @@ const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
         <Tag
           label={label}
           id={_id}
+          clientId={clientId}
           onDelete={onDelete}
           readOnly={readOnly}
           disabled={disabled}
@@ -34,15 +35,16 @@ class Tags extends PureComponent {
     disabled: PropTypes.bool,
     texts: PropTypes.object,
     children: PropTypes.node,
+    clientId: PropTypes.string.isRequired,
   }
 
   render() {
-    const { tags, onTagRemove, texts = {}, disabled, readOnly, children } = this.props
+    const { tags, onTagRemove, texts = {}, disabled, readOnly, children, clientId } = this.props
     const lastItem = children || <span className="placeholder">{texts.placeholder || 'Choose...'}</span>
 
     return (
       <ul className="tag-list">
-        {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove)}
+        {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove, clientId)}
         <li className="tag-item">{lastItem}</li>
       </ul>
     )
diff --git a/src/tree-manager/keyboardNavigation.js b/src/tree-manager/keyboardNavigation.js
index a41d9c2d..14b0c734 100644
--- a/src/tree-manager/keyboardNavigation.js
+++ b/src/tree-manager/keyboardNavigation.js
@@ -144,14 +144,14 @@ const getNextFocus = (tree, prevFocus, action, getNodeById, markSubTreeOnNonExpa
   return getRelativeFocus(nodes, prevFocus, action)
 }
 
-const getNextFocusAfterTagDelete = (deletedId, prevTags, tags, fallback) => {
+const getNextFocusAfterTagDelete = ({ id, prevTags, tags, fallback, clientId }) => {
   // Sets new focus to next tag or returns fallback
-  let index = prevTags && prevTags.findIndex(t => t._id === deletedId)
+  let index = prevTags && prevTags.findIndex(t => t._id === id)
   if (index < 0 || !tags.length) return fallback
 
   index = tags.length > index ? index : tags.length - 1
   const newFocusId = tags[index]._id
-  const focusNode = document.getElementById(getTagId(newFocusId))
+  const focusNode = document.getElementById(getTagId({ clientId, id: newFocusId }))
   if (focusNode) {
     return focusNode.firstElementChild || fallback
   }
diff --git a/src/trigger/index.js b/src/trigger/index.js
index ddead5c6..eb62e9f4 100644
--- a/src/trigger/index.js
+++ b/src/trigger/index.js
@@ -28,7 +28,7 @@ class Trigger extends PureComponent {
         labelledBy.push(triggerId)
       }
       tags.forEach(t => {
-        labelledBy.push(getTagId(t._id))
+        labelledBy.push(getTagId({ clientId, id: t._id }))
       })
       labelAttributes = getAriaLabel(texts.label, labelledBy.join(' '))
     }