From cc4b0cd23f9d8cba03cf8ad13c66a9889d5f4bb6 Mon Sep 17 00:00:00 2001 From: davit95 Date: Fri, 17 May 2024 16:19:27 +0400 Subject: [PATCH 1/2] Added support of adding mentions when using package in the shadow dom --- src/MentionsInput.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/MentionsInput.js b/src/MentionsInput.js index 68e6b73d..0c91d0d4 100755 --- a/src/MentionsInput.js +++ b/src/MentionsInput.js @@ -145,6 +145,7 @@ class MentionsInput extends React.Component { document.addEventListener('copy', this.handleCopy) document.addEventListener('cut', this.handleCut) document.addEventListener('paste', this.handlePaste) + window.addEventListener('trigger-shadow-root-input-onSelect', this.handleSelect) this.updateSuggestionsPosition() } @@ -172,6 +173,7 @@ class MentionsInput extends React.Component { document.removeEventListener('copy', this.handleCopy) document.removeEventListener('cut', this.handleCut) document.removeEventListener('paste', this.handlePaste) + window.addEventListener('trigger-shadow-root-input-onSelect', this.handleSelect) } render() { @@ -586,7 +588,11 @@ class MentionsInput extends React.Component { } // Handle input element's select event - handleSelect = (ev) => { + handleSelect = (event) => { + // from shadow dom fire custom event and pass event to handleSelect via event.detail.event + // in shadow dom onSelect event does not work + // https://it.javascript.info/shadow-dom-events + const ev = event.detail ? event.detail.event : event // keep track of selection range / caret position this.setState({ selectionStart: ev.target.selectionStart, From d2fbaa1a917b034c11220d2f4087428671bbf528 Mon Sep 17 00:00:00 2001 From: davit95 Date: Fri, 17 May 2024 16:44:10 +0400 Subject: [PATCH 2/2] Create forty-islands-bow.md --- .changeset/forty-islands-bow.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/forty-islands-bow.md diff --git a/.changeset/forty-islands-bow.md b/.changeset/forty-islands-bow.md new file mode 100644 index 00000000..56410189 --- /dev/null +++ b/.changeset/forty-islands-bow.md @@ -0,0 +1,5 @@ +--- +"react-mentions": patch +--- + +Added support of adding mentions when using package in the shadow dom