Add option for EditText to edit on double click

example/src/App.js

@@ -83,6 +83,11 @@ const App = () => {
                   editButtonProps={{ style: { marginLeft: '5px', width: 16 } }}
                   showEditButton
                 />
+                <EditText
+                  name='textbox4'
+                  defaultValue='Double click me to edit my text'
+                  editOnDoubleClick
+                />
                 <EditTextarea placeholder='I am an editable textarea' />
               </div>
             </div>
@@ -171,6 +176,11 @@ const App = () => {
             (default: false) are props that are passed to the edit button
             element. This can include any valid DOM attribute.
           </li>
+          <li>
+            <b>editOnDoubleClick</b> <sup className='new-badge'>NEW</sup>{' '}
+            (default: false) enables editing on double click instead of single
+            click.
+          </li>
         </ul>
         <p className='lead mb-0'>EditTextarea props</p>
         <ul>

src/EditText.js

@@ -24,7 +24,8 @@ export default function EditText({
   showEditButton = false,
   editButtonContent = <EditIcon />,
   editButtonProps = {},
-  inputClassName
+  inputClassName,
+  editOnDoubleClick = false
 }) {
   const inputRef = React.useRef(null);
   const [changeEvent, setChangeEvent] = React.useState({});
@@ -50,6 +51,14 @@ export default function EditText({
 
   const handleClickDisplay = () => {
     if (readonly || showEditButton) return;
+    if (editOnDoubleClick) return;
+    setEditMode(true);
+    onEditMode();
+  };
+
+  const handleDoubleClickDisplay = () => {
+    if (readonly || showEditButton) return;
+    if (!editOnDoubleClick) return;
     setEditMode(true);
     onEditMode();
   };
@@ -120,6 +129,7 @@ export default function EditText({
             className
           )}
           onClick={handleClickDisplay}
+          onDoubleClick={handleDoubleClickDisplay}
           style={style}
           aria-label='display component'
         >

src/EditText.test.js

@@ -16,6 +16,15 @@ test('clicking on the component should activate edit mode', async () => {
   expect(screen.queryByLabelText(displayComponentLabel)).toBeNull();
   expect(screen.queryByLabelText(inputComponentLabel)).toBeTruthy();
 });
+test('double clicking on the component should activate edit mode if editOnDoubleClick is true', async () => {
+  render(<EditText editOnDoubleClick />);
+  const div = await screen.findByLabelText(displayComponentLabel);
+  expect(div).toBeTruthy();
+  expect(screen.queryByLabelText(inputComponentLabel)).toBeNull();
+  await userEvent.dblClick(div);
+  expect(screen.queryByLabelText(displayComponentLabel)).toBeNull();
+  expect(screen.queryByLabelText(inputComponentLabel)).toBeTruthy();
+});
 test('pressing enter key should disable edit mode and trigger onSave', async () => {
   const handleSave = jest.fn();
   render(<EditText name='mockName' onSave={handleSave} />);

src/propTypes.js

@@ -23,7 +23,8 @@ export const EditTextPropTypes = {
   inline: PropTypes.bool,
   showEditButton: PropTypes.bool,
   editButtonContent: PropTypes.any,
-  editButtonProps: PropTypes.object
+  editButtonProps: PropTypes.object,
+  editOnDoubleClick: PropTypes.bool
 };
 
 export const EditTextareaPropTypes = {