From 3a5036d51ff5816bf3e286ba6060abc90db093cd Mon Sep 17 00:00:00 2001
From: Aleksei <saenko.alexei@gmail.com>
Date: Mon, 23 Sep 2024 11:45:30 +0300
Subject: [PATCH] Allow the use of a custom input component (#739)

---
 .changeset/popular-toys-wait.md           |  5 +++
 .gitignore                                |  4 ++-
 README.md                                 |  1 +
 demo/src/examples/CustomInputComponent.js | 37 +++++++++++++++++++++++
 demo/src/examples/Examples.js             |  2 ++
 demo/src/examples/example.module.css      | 22 ++++++++++++++
 src/MentionsInput.js                      | 12 +++++---
 src/MentionsInput.spec.js                 | 15 +++++++++
 8 files changed, 93 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/popular-toys-wait.md
 create mode 100644 demo/src/examples/CustomInputComponent.js

diff --git a/.changeset/popular-toys-wait.md b/.changeset/popular-toys-wait.md
new file mode 100644
index 00000000..52e72455
--- /dev/null
+++ b/.changeset/popular-toys-wait.md
@@ -0,0 +1,5 @@
+---
+"react-mentions": minor
+---
+
+Allow the use of a custom input component
diff --git a/.gitignore b/.gitignore
index c3f746cd..aac15554 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,4 +8,6 @@
 
 npm-debug.log*
 
-*.log
\ No newline at end of file
+*.log
+
+.DS_Store
\ No newline at end of file
diff --git a/README.md b/README.md
index 6d2a7f2b..86b9cb23 100755
--- a/README.md
+++ b/README.md
@@ -64,6 +64,7 @@ The `MentionsInput` supports the following props for configuring the widget:
 | forceSuggestionsAboveCursor | boolean                                                 | false          | Forces the SuggestionList to be rendered above the cursor                              |
 | a11ySuggestionsListLabel    | string                                                  | `''`           | This label would be exposed to screen readers when suggestion popup appears            |
 | customSuggestionsContainer  | function(children)                                      | empty function | Allows customizing the container of the suggestions                                    |
+| inputComponent              | React component                                         | undefined      | Allows the use of a custom input component component                                                 |
 
 Each data source is configured using a `Mention` component, which has the following props:
 
diff --git a/demo/src/examples/CustomInputComponent.js b/demo/src/examples/CustomInputComponent.js
new file mode 100644
index 00000000..6de3e772
--- /dev/null
+++ b/demo/src/examples/CustomInputComponent.js
@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { Mention, MentionsInput } from '../../../src'
+
+import { provideExampleValue } from './higher-order'
+import defaultStyle from './defaultStyle'
+import defaultMentionStyle from './defaultMentionStyle'
+
+// eslint-disable-next-line no-unused-vars
+import classNames from './example.module.css' // uses global css selector
+
+const  CustomInput = React.forwardRef((props, ref) => {
+  return <textarea ref={ref} {...props} className="custom-textarea" />
+})
+
+function CustomInputComponent({ value, data, onChange, onAdd }) {
+  return (
+    <div className="custom-input">
+      <h3>Custom input component</h3>
+
+      <MentionsInput
+        value={value}
+        onChange={onChange}
+        style={defaultStyle}
+        placeholder={"Mention people using '@'"}
+        a11ySuggestionsListLabel={"Suggested mentions"}
+        inputComponent={CustomInput}
+      >
+        <Mention data={data} onAdd={onAdd} style={defaultMentionStyle} />
+      </MentionsInput>
+    </div>
+  )
+}
+
+const asExample = provideExampleValue('')
+
+export default asExample(CustomInputComponent)
diff --git a/demo/src/examples/Examples.js b/demo/src/examples/Examples.js
index 1e1e7e82..e5606f84 100644
--- a/demo/src/examples/Examples.js
+++ b/demo/src/examples/Examples.js
@@ -13,6 +13,7 @@ import SingleLineIgnoringAccents from './SingleLineIgnoringAccents'
 import SuggestionPortal from './SuggestionPortal'
 import BottomGuard from './BottomGuard'
 import CustomSuggestionsContainer from './CustomSuggestionsContainer'
+import CustomInputComponent from './CustomInputComponent'
 
 const users = [
   {
@@ -90,6 +91,7 @@ export default function Examples() {
         <SuggestionPortal data={users} />
         <BottomGuard data={users} />
         <CustomSuggestionsContainer data={users} />
+        <CustomInputComponent data={users} />
       </div>
     </StylesViaJss>
   )
diff --git a/demo/src/examples/example.module.css b/demo/src/examples/example.module.css
index cb5e1971..34adf84d 100644
--- a/demo/src/examples/example.module.css
+++ b/demo/src/examples/example.module.css
@@ -54,3 +54,25 @@
   text-decoration: underline;
   pointer-events: none;
 }
+
+
+:global(.custom-textarea) {
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  border: 4px solid blue;
+  bottom: 0px;
+  height: 100%;
+  min-height: 80px;
+  margin: 0px;
+  resize: none;
+  display: block;
+  padding: 12px;
+  overflow: hidden;
+  position: absolute;
+  font-size: inherit;
+  box-sizing: border-box;
+  font-family: inherit;
+  letter-spacing: inherit;
+  background-color: transparent;
+}
diff --git a/src/MentionsInput.js b/src/MentionsInput.js
index 68e6b73d..7c22d8fd 100755
--- a/src/MentionsInput.js
+++ b/src/MentionsInput.js
@@ -96,6 +96,7 @@ const propTypes = {
           : PropTypes.instanceOf(Element),
     }),
   ]),
+  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.elementType]),
 
   children: PropTypes.oneOfType([
     PropTypes.element,
@@ -229,15 +230,18 @@ class MentionsInput extends React.Component {
   }
 
   renderControl = () => {
-    let { singleLine, style } = this.props
+    let { singleLine, style, inputComponent: CustomInput } = this.props
     let inputProps = this.getInputProps()
 
     return (
       <div {...style('control')}>
         {this.renderHighlighter()}
-        {singleLine
-          ? this.renderInput(inputProps)
-          : this.renderTextarea(inputProps)}
+        {CustomInput
+          ? <CustomInput ref={this.setInputRef} {...inputProps} />
+          : singleLine
+            ? this.renderInput(inputProps)
+            : this.renderTextarea(inputProps)
+        }
       </div>
     )
   }
diff --git a/src/MentionsInput.spec.js b/src/MentionsInput.spec.js
index f192f1aa..941ce205 100644
--- a/src/MentionsInput.spec.js
+++ b/src/MentionsInput.spec.js
@@ -177,6 +177,21 @@ describe('MentionsInput', () => {
     expect(inputRef).toHaveBeenCalledWith(el)
   })
 
+  it('should render a custom input when supplied.', () => {
+    const CustomInput = React.forwardRef((props, ref) => {
+      return <input id="testInput" ref={ref} {...props} />
+    })
+    const wrapper = mount(
+      <MentionsInput value="test" inputComponent={CustomInput}>
+        <Mention trigger="@" data={data} />
+      </MentionsInput>
+    )
+
+    expect(wrapper.find('textarea').length).toEqual(0)
+    expect(wrapper.find('input').length).toEqual(1)
+    expect(wrapper.find('input#testInput').length).toEqual(1)
+  })
+
   describe('makeTriggerRegex', () => {
     it('should return regular expressions', () => {
       const trigger = /abc/