diff --git a/example/src/App.js b/example/src/App.js
index 36aa2a4..d4b2637 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -83,6 +83,11 @@ const App = () => {
editButtonProps={{ style: { marginLeft: '5px', width: 16 } }}
showEditButton
/>
+
@@ -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.
+
+ editOnDoubleClick NEW{' '}
+ (default: false) enables editing on double click instead of single
+ click.
+
EditTextarea props
diff --git a/src/EditText.js b/src/EditText.js
index a705ee1..c398971 100644
--- a/src/EditText.js
+++ b/src/EditText.js
@@ -24,7 +24,8 @@ export default function EditText({
showEditButton = false,
editButtonContent = ,
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'
>
diff --git a/src/EditText.test.js b/src/EditText.test.js
index a0c56b9..7af9aa9 100644
--- a/src/EditText.test.js
+++ b/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();
+ 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();
diff --git a/src/propTypes.js b/src/propTypes.js
index 5312bce..cad3fc5 100644
--- a/src/propTypes.js
+++ b/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 = {