The library for web and native user interfaces.
Simulate input event instead of relying on native
Test Plan: With the ballmer-peak example (modified to use input), tested that the percentage updates when adding or deleting text in the field on Chrome and IE9. After adding es5-shim and es5-sham to the ballmer-peak page, IE8 works properly too.
Ben Alpert committed
Jun 1, 2013 at 16:53 UTC
580e8f0dbbbb7963c27fee42fd843c6d2a89e2ca
6 files changed
+108
-9
src/core/ReactDefaultInjection.js
+3
-1
@@ -24,6 +24,7 @@ var ReactDOMForm = require('ReactDOMForm');
24
var DefaultEventPluginOrder = require('DefaultEventPluginOrder');
25
var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
26
var EventPluginHub = require('EventPluginHub');
27
+var InputEventPlugin = require('InputEventPlugin');
28
var ReactInstanceHandles = require('ReactInstanceHandles');
29
var SimpleEventPlugin = require('SimpleEventPlugin');
30
@@ -40,7 +41,8 @@ function inject() {
41
*/
42
EventPluginHub.injection.injectEventPluginsByName({
43
'SimpleEventPlugin': SimpleEventPlugin,
43
- 'EnterLeaveEventPlugin': EnterLeaveEventPlugin
44
+ 'EnterLeaveEventPlugin': EnterLeaveEventPlugin,
45
+ 'InputEventPlugin': InputEventPlugin
46
});
47
48
/*
src/core/ReactEvent.js
+3
-1
@@ -211,8 +211,10 @@ function listenAtTopLevel(touchNotMouse) {
211
trapBubbledEvent(topLevelTypes.topKeyUp, 'keyup', mountAt);
212
trapBubbledEvent(topLevelTypes.topKeyPress, 'keypress', mountAt);
213
trapBubbledEvent(topLevelTypes.topKeyDown, 'keydown', mountAt);
214
- trapBubbledEvent(topLevelTypes.topInput, 'input', mountAt);
214
trapBubbledEvent(topLevelTypes.topChange, 'change', mountAt);
215
+ trapBubbledEvent(topLevelTypes.topInput, 'input', mountAt);
216
+ trapBubbledEvent(topLevelTypes.topCut, 'cut', mountAt);
217
+ trapBubbledEvent(topLevelTypes.topPaste, 'paste', mountAt);
218
trapBubbledEvent(
219
topLevelTypes.topDOMCharacterDataModified,
220
'DOMCharacterDataModified',
src/event/EventConstants.js
+2
@@ -29,6 +29,7 @@ var topLevelTypes = keyMirror({
29
topBlur: null,
30
topChange: null,
31
topClick: null,
32
+ topCut: null,
33
topDOMCharacterDataModified: null,
34
topDoubleClick: null,
35
topFocus: null,
@@ -42,6 +43,7 @@ var topLevelTypes = keyMirror({
43
topMouseOver: null,
44
topMouseUp: null,
45
topMouseWheel: null,
46
+ topPaste: null,
47
topScroll: null,
48
topSubmit: null,
49
topTouchCancel: null,
src/eventPlugins/DefaultEventPluginOrder.js
+1
@@ -34,6 +34,7 @@ var DefaultEventPluginOrder = [
34
keyOf({SimpleEventPlugin: null}),
35
keyOf({TapEventPlugin: null}),
36
keyOf({EnterLeaveEventPlugin: null}),
37
+ keyOf({InputEventPlugin: null}),
38
keyOf({AnalyticsEventPlugin: null})
39
];
40
src/eventPlugins/InputEventPlugin.js
new
+99
@@ -0,0 +1,99 @@
1
+/**
2
+ * Copyright 2013 Facebook, Inc.
3
+ *
4
+ * Licensed under the Apache License, Version 2.0 (the "License");
5
+ * you may not use this file except in compliance with the License.
6
+ * You may obtain a copy of the License at
7
+ *
8
+ * http://www.apache.org/licenses/LICENSE-2.0
9
+ *
10
+ * Unless required by applicable law or agreed to in writing, software
11
+ * distributed under the License is distributed on an "AS IS" BASIS,
12
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13
+ * See the License for the specific language governing permissions and
14
+ * limitations under the License.
15
+ *
16
+ * @providesModule InputEventPlugin
17
+ */
18
+
19
+"use strict";
20
+
21
+var AbstractEvent = require('AbstractEvent');
22
+var EventConstants = require('EventConstants');
23
+var EventPluginUtils = require('EventPluginUtils');
24
+var EventPropagators = require('EventPropagators');
25
+
26
+var keyOf = require('keyOf');
27
+
28
+var topLevelTypes = EventConstants.topLevelTypes;
29
+
30
+var abstractEventTypes = {
31
+ input: {
32
+ phasedRegistrationNames: {
33
+ bubbled: keyOf({onInput: null}),
34
+ captured: keyOf({onInputCapture: null})
35
+ }
36
+ }
37
+};
38
+
39
+/**
40
+ * @see EventPluginHub.extractAbstractEvents
41
+ */
42
+var extractAbstractEvents = function(
43
+ topLevelType,
44
+ nativeEvent,
45
+ renderedTargetID,
46
+ renderedTarget) {
47
+
48
+ var defer, key;
49
+ switch (topLevelType) {
50
+ case topLevelTypes.topInput:
51
+ // When the native input event is triggered, we definitely want to
52
+ // forward it along. However, IE9's input event doesn't get triggered
53
+ // when deleting text, and IE8 doesn't support input at all, so we
54
+ // simulate it on change, cut, paste, and keydown.
55
+ case topLevelTypes.topChange:
56
+ defer = false;
57
+ break;
58
+ case topLevelTypes.topCut:
59
+ case topLevelTypes.topPaste:
60
+ defer = true;
61
+ break;
62
+ case topLevelTypes.topKeyDown:
63
+ key = nativeEvent.keyCode;
64
+ // Ignore command, modifiers, and arrow keys, respectively
65
+ if (key === 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) {
66
+ return;
67
+ }
68
+ defer = true;
69
+ break;
70
+ default:
71
+ return;
72
+ }
73
+
74
+ var type = abstractEventTypes.input;
75
+ var abstractTargetID = renderedTargetID;
76
+ var abstractEvent = AbstractEvent.getPooled(
77
+ type,
78
+ abstractTargetID,
79
+ topLevelType,
80
+ nativeEvent
81
+ );
82
+ EventPropagators.accumulateTwoPhaseDispatches(abstractEvent);
83
+
84
+ if (defer) {
85
+ setTimeout(function() {
86
+ EventPluginHub.enqueueAbstractEvents(abstractEvent);
87
+ EventPluginHub.processAbstractEventQueue();
88
+ }, 0);
89
+ } else {
90
+ return abstractEvent;
91
+ }
92
+};
93
+
94
+var InputEventPlugin = {
95
+ abstractEventTypes: abstractEventTypes,
96
+ extractAbstractEvents: extractAbstractEvents
97
+};
98
+
99
+module.exports = InputEventPlugin;
src/eventPlugins/SimpleEventPlugin.js
-7
@@ -108,12 +108,6 @@ var SimpleEventPlugin = {
108
captured: keyOf({onKeyDownCapture: true})
109
}
110
},
111
- input: {
112
- phasedRegistrationNames: {
113
- bubbled: keyOf({onInput: true}),
114
- captured: keyOf({onInputCapture: true})
115
- }
116
- },
111
focus: {
112
phasedRegistrationNames: {
113
bubbled: keyOf({onFocus: true}),
@@ -226,7 +220,6 @@ SimpleEventPlugin.topLevelTypesToAbstract = {
220
topKeyUp: SimpleEventPlugin.abstractEventTypes.keyUp,
221
topKeyPress: SimpleEventPlugin.abstractEventTypes.keyPress,
222
topKeyDown: SimpleEventPlugin.abstractEventTypes.keyDown,
229
- topInput: SimpleEventPlugin.abstractEventTypes.input,
223
topFocus: SimpleEventPlugin.abstractEventTypes.focus,
224
topBlur: SimpleEventPlugin.abstractEventTypes.blur,
225
topScroll: SimpleEventPlugin.abstractEventTypes.scroll,