Skip to content

Commit d1d7241

Browse files
mtrezzamtrezza
authored
fix: ESC key does not cancel editing in data browser cell (#3001)
1 parent 307ec78 commit d1d7241

File tree

5 files changed

+76
-14
lines changed

5 files changed

+76
-14
lines changed

‎src/components/DateTimeEditor/DateTimeEditor.react.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,14 @@ export default class DateTimeEditor extends React.Component {
3333

3434
componentDidMount() {
3535
document.body.addEventListener('click', this.checkExternalClick);
36-
this.inputRef.current.addEventListener('keypress', this.handleKey);
36+
document.body.addEventListener('touchend', this.checkExternalClick);
37+
this.inputRef.current.addEventListener('keydown', this.handleKey);
3738
}
3839

3940
componentWillUnmount() {
4041
document.body.removeEventListener('click', this.checkExternalClick);
41-
this.inputRef.current.removeEventListener('keypress', this.handleKey);
42+
document.body.removeEventListener('touchend', this.checkExternalClick);
43+
this.inputRef.current.removeEventListener('keydown', this.handleKey);
4244
}
4345

4446
checkExternalClick(e) {
@@ -51,6 +53,16 @@ export default class DateTimeEditor extends React.Component {
5153
if (e.keyCode === 13) {
5254
this.commitDate();
5355
this.props.onCommit(this.state.value);
56+
e.preventDefault();
57+
} else if (e.keyCode === 27) {
58+
// ESC key - cancel editing
59+
if (this.props.onCancel) {
60+
this.props.onCancel();
61+
} else {
62+
this.props.onCommit(this.props.value);
63+
}
64+
e.preventDefault();
65+
e.stopPropagation();
5466
}
5567
}
5668

‎src/components/GeoPointEditor/GeoPointEditor.react.js‎

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ export default class GeoPointEditor extends React.Component {
3232
this.latitudeRef.current.focus();
3333
}
3434
this.latitudeRef.current.setSelectionRange(0, String(this.state.latitude).length);
35-
this.latitudeRef.current.addEventListener('keypress', this.handleKeyLatitude);
36-
this.longitudeRef.current.addEventListener('keypress', this.handleKeyLongitude);
35+
this.latitudeRef.current.addEventListener('keydown', this.handleKeyLatitude);
36+
this.longitudeRef.current.addEventListener('keydown', this.handleKeyLongitude);
3737
}
3838

3939
componentWillReceiveProps(props) {
@@ -48,8 +48,8 @@ export default class GeoPointEditor extends React.Component {
4848
}
4949

5050
componentWillUnmount() {
51-
this.latitudeRef.current.removeEventListener('keypress', this.handleKeyLatitude);
52-
this.longitudeRef.current.removeEventListener('keypress', this.handleKeyLongitude);
51+
this.latitudeRef.current.removeEventListener('keydown', this.handleKeyLatitude);
52+
this.longitudeRef.current.removeEventListener('keydown', this.handleKeyLongitude);
5353
}
5454

5555
checkExternalClick() {
@@ -73,12 +73,32 @@ export default class GeoPointEditor extends React.Component {
7373
if (e.keyCode === 13 || e.keyCode === 44) {
7474
this.longitudeRef.current.focus();
7575
this.longitudeRef.current.setSelectionRange(0, String(this.state.longitude).length);
76+
e.preventDefault();
77+
} else if (e.keyCode === 27) {
78+
// ESC key - cancel editing
79+
if (this.props.onCancel) {
80+
this.props.onCancel();
81+
} else {
82+
this.props.onCommit(this.props.value);
83+
}
84+
e.preventDefault();
85+
e.stopPropagation();
7686
}
7787
}
7888

7989
handleKeyLongitude(e) {
8090
if (e.keyCode === 13) {
8191
this.commitValue();
92+
e.preventDefault();
93+
} else if (e.keyCode === 27) {
94+
// ESC key - cancel editing
95+
if (this.props.onCancel) {
96+
this.props.onCancel();
97+
} else {
98+
this.props.onCommit(this.props.value);
99+
}
100+
e.preventDefault();
101+
e.stopPropagation();
82102
}
83103
}
84104

‎src/components/NumberEditor/NumberEditor.react.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,14 @@ export default class NumberEditor extends React.Component {
2525
componentDidMount() {
2626
this.inputRef.current.setSelectionRange(0, String(this.state.value).length);
2727
document.body.addEventListener('click', this.checkExternalClick);
28-
document.body.addEventListener('keypress', this.handleKey);
28+
document.body.addEventListener('touchend', this.checkExternalClick);
29+
document.body.addEventListener('keydown', this.handleKey);
2930
}
3031

3132
componentWillUnmount() {
3233
document.body.removeEventListener('click', this.checkExternalClick);
33-
document.body.removeEventListener('keypress', this.handleKey);
34+
document.body.removeEventListener('touchend', this.checkExternalClick);
35+
document.body.removeEventListener('keydown', this.handleKey);
3436
}
3537

3638
checkExternalClick(e) {
@@ -42,6 +44,17 @@ export default class NumberEditor extends React.Component {
4244
handleKey(e) {
4345
if (e.keyCode === 13) {
4446
this.commitValue();
47+
e.preventDefault();
48+
} else if (e.keyCode === 27) {
49+
// ESC key - cancel editing
50+
if (this.props.onCancel) {
51+
this.props.onCancel();
52+
} else {
53+
// If no onCancel callback, commit the original value
54+
this.props.onCommit(this.props.value);
55+
}
56+
e.preventDefault();
57+
e.stopPropagation();
4558
}
4659
}
4760

‎src/components/StringEditor/StringEditor.react.js‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,14 @@ export default class StringEditor extends React.Component {
2424
componentDidMount() {
2525
this.inputRef.current.setSelectionRange(0, this.state.value.length);
2626
document.body.addEventListener('click', this.checkExternalClick);
27-
document.body.addEventListener('keypress', this.handleKey);
27+
document.body.addEventListener('touchend', this.checkExternalClick);
28+
document.body.addEventListener('keydown', this.handleKey);
2829
}
2930

3031
componentWillUnmount() {
3132
document.body.removeEventListener('click', this.checkExternalClick);
32-
document.body.removeEventListener('keypress', this.handleKey);
33+
document.body.removeEventListener('touchend', this.checkExternalClick);
34+
document.body.removeEventListener('keydown', this.handleKey);
3335
}
3436

3537
checkExternalClick(e) {
@@ -44,7 +46,18 @@ export default class StringEditor extends React.Component {
4446
// Otherwise, we submit
4547
if (!this.props.multiline || !e.shiftKey) {
4648
this.props.onCommit(this.state.value);
49+
e.preventDefault();
4750
}
51+
} else if (e.keyCode === 27) {
52+
// ESC key - cancel editing
53+
if (this.props.onCancel) {
54+
this.props.onCancel();
55+
} else {
56+
// If no onCancel callback, just commit the original value
57+
this.props.onCommit(this.props.value);
58+
}
59+
e.preventDefault();
60+
e.stopPropagation();
4861
}
4962
}
5063

‎src/dashboard/Data/Browser/Editor.react.js‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit
2626
multiline={!readonly}
2727
width={width}
2828
onCommit={onCommit}
29+
onCancel={onCancel}
2930
resizable={true}
3031
/>
3132
);
@@ -45,6 +46,7 @@ const Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit
4546
multiline={true}
4647
width={width}
4748
onCommit={encodeCommit}
49+
onCancel={onCancel}
4850
/>
4951
);
5052
} else if (type === 'Polygon') {
@@ -83,6 +85,7 @@ const Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit
8385
multiline={true}
8486
width={width}
8587
onCommit={encodeCommit}
88+
onCancel={onCancel}
8689
/>
8790
);
8891
} else if (type === 'Date') {
@@ -93,17 +96,18 @@ const Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit
9396
readonly={true}
9497
width={width}
9598
onCommit={() => onCommit(value)}
99+
onCancel={onCancel}
96100
/>
97101
);
98102
} else {
99-
content = <DateTimeEditor value={value || new Date()} width={width} onCommit={onCommit} />;
103+
content = <DateTimeEditor value={value || new Date()} width={width} onCommit={onCommit} onCancel={onCancel} />;
100104
}
101105
} else if (type === 'Boolean') {
102106
content = <BooleanEditor value={value} width={width} onCommit={onCommit} />;
103107
} else if (type === 'Number') {
104-
content = <NumberEditor value={value} width={width} onCommit={onCommit} />;
108+
content = <NumberEditor value={value} width={width} onCommit={onCommit} onCancel={onCancel} />;
105109
} else if (type === 'GeoPoint') {
106-
content = <GeoPointEditor value={value} width={width} onCommit={onCommit} />;
110+
content = <GeoPointEditor value={value} width={width} onCommit={onCommit} onCancel={onCancel} />;
107111
} else if (type === 'File') {
108112
content = <FileEditor value={value} width={width} onCommit={onCommit} onCancel={onCancel} />;
109113
} else if (type === 'ACL') {
@@ -121,7 +125,7 @@ const Editor = ({ top, left, type, targetClass, value, readonly, width, onCommit
121125
);
122126
}
123127
};
124-
content = <StringEditor value={value ? value.id : ''} width={width} onCommit={encodeCommit} />;
128+
content = <StringEditor value={value ? value.id : ''} width={width} onCommit={encodeCommit} onCancel={onCancel} />;
125129
}
126130

127131
return <div style={{ position: 'absolute', top: top, left: left }}>{content}</div>;

0 commit comments

Comments
 (0)