How to use accumulateTwoPhaseListeners method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

LegacySelectEventPlugin.js

Source: LegacySelectEventPlugin.js Github

copy
1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8import {canUseDOM} from 'shared/ExecutionEnvironment';
9import SyntheticEvent from 'legacy-events/SyntheticEvent';
10import isTextInputElement from '../isTextInputElement';
11import shallowEqual from 'shared/shallowEqual';
12
13import {
14  TOP_BLUR,
15  TOP_CONTEXT_MENU,
16  TOP_DRAG_END,
17  TOP_FOCUS,
18  TOP_KEY_DOWN,
19  TOP_KEY_UP,
20  TOP_MOUSE_DOWN,
21  TOP_MOUSE_UP,
22  TOP_SELECTION_CHANGE,
23} from '../DOMTopLevelEventTypes';
24import getActiveElement from '../../client/getActiveElement';
25import {getNodeFromInstance} from '../../client/ReactDOMComponentTree';
26import {hasSelectionCapabilities} from '../../client/ReactInputSelection';
27import {DOCUMENT_NODE} from '../../shared/HTMLNodeType';
28import {isListeningToAllDependencies} from '../DOMEventListenerMap';
29import accumulateTwoPhaseListeners from '../accumulateTwoPhaseListeners';
30
31const skipSelectionChangeEvent =
32  canUseDOM && 'documentMode' in document && document.documentMode <= 11;
33
34const eventTypes = {
35  select: {
36    phasedRegistrationNames: {
37      bubbled: 'onSelect',
38      captured: 'onSelectCapture',
39    },
40    dependencies: [
41      TOP_BLUR,
42      TOP_CONTEXT_MENU,
43      TOP_DRAG_END,
44      TOP_FOCUS,
45      TOP_KEY_DOWN,
46      TOP_KEY_UP,
47      TOP_MOUSE_DOWN,
48      TOP_MOUSE_UP,
49      TOP_SELECTION_CHANGE,
50    ],
51  },
52};
53
54let activeElement = null;
55let activeElementInst = null;
56let lastSelection = null;
57let mouseDown = false;
58
59/**
60 * Get an object which is a unique representation of the current selection.
61 *
62 * The return value will not be consistent across nodes or browsers, but
63 * two identical selections on the same node will return identical objects.
64 *
65 * @param {DOMElement} node
66 * @return {object}
67 */
68function getSelection(node) {
69  if ('selectionStart' in node && hasSelectionCapabilities(node)) {
70    return {
71      start: node.selectionStart,
72      end: node.selectionEnd,
73    };
74  } else {
75    const win =
76      (node.ownerDocument && node.ownerDocument.defaultView) || window;
77    const selection = win.getSelection();
78    return {
79      anchorNode: selection.anchorNode,
80      anchorOffset: selection.anchorOffset,
81      focusNode: selection.focusNode,
82      focusOffset: selection.focusOffset,
83    };
84  }
85}
86
87/**
88 * Get document associated with the event target.
89 *
90 * @param {object} nativeEventTarget
91 * @return {Document}
92 */
93function getEventTargetDocument(eventTarget) {
94  return eventTarget.window === eventTarget
95    ? eventTarget.document
96    : eventTarget.nodeType === DOCUMENT_NODE
97    ? eventTarget
98    : eventTarget.ownerDocument;
99}
100
101/**
102 * Poll selection to see whether it's changed.
103 *
104 * @param {object} nativeEvent
105 * @param {object} nativeEventTarget
106 * @return {?SyntheticEvent}
107 */
108function constructSelectEvent(nativeEvent, nativeEventTarget) {
109  // Ensure we have the right element, and that the user is not dragging a
110  // selection (this matches native `select` event behavior). In HTML5, select
111  // fires only on input and textarea thus if there's no focused element we
112  // won't dispatch.
113  const doc = getEventTargetDocument(nativeEventTarget);
114
115  if (
116    mouseDown ||
117    activeElement == null ||
118    activeElement !== getActiveElement(doc)
119  ) {
120    return null;
121  }
122
123  // Only fire when selection has actually changed.
124  const currentSelection = getSelection(activeElement);
125  if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
126    lastSelection = currentSelection;
127
128    const syntheticEvent = SyntheticEvent.getPooled(
129      eventTypes.select,
130      activeElementInst,
131      nativeEvent,
132      nativeEventTarget,
133    );
134
135    syntheticEvent.type = 'select';
136    syntheticEvent.target = activeElement;
137
138    accumulateTwoPhaseListeners(syntheticEvent);
139
140    return syntheticEvent;
141  }
142
143  return null;
144}
145
146/**
147 * This plugin creates an `onSelect` event that normalizes select events
148 * across form elements.
149 *
150 * Supported elements are:
151 * - input (see `isTextInputElement`)
152 * - textarea
153 * - contentEditable
154 *
155 * This differs from native browser implementations in the following ways:
156 * - Fires on contentEditable fields as well as inputs.
157 * - Fires for collapsed selection.
158 * - Fires after user input.
159 */
160const SelectEventPlugin = {
161  eventTypes: eventTypes,
162
163  extractEvents: function(
164    topLevelType,
165    targetInst,
166    nativeEvent,
167    nativeEventTarget,
168    eventSystemFlags,
169    container,
170  ) {
171    const containerOrDoc =
172      container || getEventTargetDocument(nativeEventTarget);
173    // Track whether all listeners exists for this plugin. If none exist, we do
174    // not extract events. See #3639.
175    if (
176      !containerOrDoc ||
177      !isListeningToAllDependencies('onSelect', containerOrDoc)
178    ) {
179      return null;
180    }
181
182    const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
183
184    switch (topLevelType) {
185      // Track the input node that has focus.
186      case TOP_FOCUS:
187        if (
188          isTextInputElement(targetNode) ||
189          targetNode.contentEditable === 'true'
190        ) {
191          activeElement = targetNode;
192          activeElementInst = targetInst;
193          lastSelection = null;
194        }
195        break;
196      case TOP_BLUR:
197        activeElement = null;
198        activeElementInst = null;
199        lastSelection = null;
200        break;
201      // Don't fire the event while the user is dragging. This matches the
202      // semantics of the native select event.
203      case TOP_MOUSE_DOWN:
204        mouseDown = true;
205        break;
206      case TOP_CONTEXT_MENU:
207      case TOP_MOUSE_UP:
208      case TOP_DRAG_END:
209        mouseDown = false;
210        return constructSelectEvent(nativeEvent, nativeEventTarget);
211      // Chrome and IE fire non-standard event when selection is changed (and
212      // sometimes when it hasn't). IE's event fires out of order with respect
213      // to key and input events on deletion, so we discard it.
214      //
215      // Firefox doesn't support selectionchange, so check selection status
216      // after each key entry. The selection changes after keydown and before
217      // keyup, but we check on keydown as well in the case of holding down a
218      // key, when multiple keydown events are fired but only one keyup is.
219      // This is also our approach for IE handling, for the reason above.
220      case TOP_SELECTION_CHANGE:
221        if (skipSelectionChangeEvent) {
222          break;
223        }
224      // falls through
225      case TOP_KEY_DOWN:
226      case TOP_KEY_UP:
227        return constructSelectEvent(nativeEvent, nativeEventTarget);
228    }
229
230    return null;
231  },
232};
233
234export default SelectEventPlugin;
235
Full Screen

SelectEventPlugin.js

Source: SelectEventPlugin.js Github

copy
1/**
2 * Copyright (c) Facebook, Inc. and its affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8import {canUseDOM} from 'shared/ExecutionEnvironment';
9import SyntheticEvent from 'legacy-events/SyntheticEvent';
10import isTextInputElement from 'shared/isTextInputElement';
11import shallowEqual from 'shared/shallowEqual';
12
13import {
14  TOP_BLUR,
15  TOP_CONTEXT_MENU,
16  TOP_DRAG_END,
17  TOP_FOCUS,
18  TOP_KEY_DOWN,
19  TOP_KEY_UP,
20  TOP_MOUSE_DOWN,
21  TOP_MOUSE_UP,
22  TOP_SELECTION_CHANGE,
23} from './DOMTopLevelEventTypes';
24import getActiveElement from '../client/getActiveElement';
25import {getNodeFromInstance} from '../client/ReactDOMComponentTree';
26import {hasSelectionCapabilities} from '../client/ReactInputSelection';
27import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
28import {isListeningToAllDependencies} from './DOMEventListenerMap';
29import accumulateTwoPhaseListeners from './accumulateTwoPhaseListeners';
30
31const skipSelectionChangeEvent =
32  canUseDOM && 'documentMode' in document && document.documentMode <= 11;
33
34const eventTypes = {
35  select: {
36    phasedRegistrationNames: {
37      bubbled: 'onSelect',
38      captured: 'onSelectCapture',
39    },
40    dependencies: [
41      TOP_BLUR,
42      TOP_CONTEXT_MENU,
43      TOP_DRAG_END,
44      TOP_FOCUS,
45      TOP_KEY_DOWN,
46      TOP_KEY_UP,
47      TOP_MOUSE_DOWN,
48      TOP_MOUSE_UP,
49      TOP_SELECTION_CHANGE,
50    ],
51  },
52};
53
54let activeElement = null;
55let activeElementInst = null;
56let lastSelection = null;
57let mouseDown = false;
58
59/**
60 * Get an object which is a unique representation of the current selection.
61 *
62 * The return value will not be consistent across nodes or browsers, but
63 * two identical selections on the same node will return identical objects.
64 *
65 * @param {DOMElement} node
66 * @return {object}
67 */
68function getSelection(node) {
69  if ('selectionStart' in node && hasSelectionCapabilities(node)) {
70    return {
71      start: node.selectionStart,
72      end: node.selectionEnd,
73    };
74  } else {
75    const win =
76      (node.ownerDocument && node.ownerDocument.defaultView) || window;
77    const selection = win.getSelection();
78    return {
79      anchorNode: selection.anchorNode,
80      anchorOffset: selection.anchorOffset,
81      focusNode: selection.focusNode,
82      focusOffset: selection.focusOffset,
83    };
84  }
85}
86
87/**
88 * Get document associated with the event target.
89 *
90 * @param {object} nativeEventTarget
91 * @return {Document}
92 */
93function getEventTargetDocument(eventTarget) {
94  return eventTarget.window === eventTarget
95    ? eventTarget.document
96    : eventTarget.nodeType === DOCUMENT_NODE
97    ? eventTarget
98    : eventTarget.ownerDocument;
99}
100
101/**
102 * Poll selection to see whether it's changed.
103 *
104 * @param {object} nativeEvent
105 * @param {object} nativeEventTarget
106 * @return {?SyntheticEvent}
107 */
108function constructSelectEvent(nativeEvent, nativeEventTarget) {
109  // Ensure we have the right element, and that the user is not dragging a
110  // selection (this matches native `select` event behavior). In HTML5, select
111  // fires only on input and textarea thus if there's no focused element we
112  // won't dispatch.
113  const doc = getEventTargetDocument(nativeEventTarget);
114
115  if (
116    mouseDown ||
117    activeElement == null ||
118    activeElement !== getActiveElement(doc)
119  ) {
120    return null;
121  }
122
123  // Only fire when selection has actually changed.
124  const currentSelection = getSelection(activeElement);
125  if (!lastSelection || !shallowEqual(lastSelection, currentSelection)) {
126    lastSelection = currentSelection;
127
128    const syntheticEvent = SyntheticEvent.getPooled(
129      eventTypes.select,
130      activeElementInst,
131      nativeEvent,
132      nativeEventTarget,
133    );
134
135    syntheticEvent.type = 'select';
136    syntheticEvent.target = activeElement;
137
138    accumulateTwoPhaseListeners(syntheticEvent);
139
140    return syntheticEvent;
141  }
142
143  return null;
144}
145
146/**
147 * This plugin creates an `onSelect` event that normalizes select events
148 * across form elements.
149 *
150 * Supported elements are:
151 * - input (see `isTextInputElement`)
152 * - textarea
153 * - contentEditable
154 *
155 * This differs from native browser implementations in the following ways:
156 * - Fires on contentEditable fields as well as inputs.
157 * - Fires for collapsed selection.
158 * - Fires after user input.
159 */
160const SelectEventPlugin = {
161  eventTypes: eventTypes,
162
163  extractEvents: function(
164    topLevelType,
165    targetInst,
166    nativeEvent,
167    nativeEventTarget,
168    eventSystemFlags,
169    container,
170  ) {
171    const containerOrDoc =
172      container || getEventTargetDocument(nativeEventTarget);
173    // Track whether all listeners exists for this plugin. If none exist, we do
174    // not extract events. See #3639.
175    if (
176      !containerOrDoc ||
177      !isListeningToAllDependencies('onSelect', containerOrDoc)
178    ) {
179      return null;
180    }
181
182    const targetNode = targetInst ? getNodeFromInstance(targetInst) : window;
183
184    switch (topLevelType) {
185      // Track the input node that has focus.
186      case TOP_FOCUS:
187        if (
188          isTextInputElement(targetNode) ||
189          targetNode.contentEditable === 'true'
190        ) {
191          activeElement = targetNode;
192          activeElementInst = targetInst;
193          lastSelection = null;
194        }
195        break;
196      case TOP_BLUR:
197        activeElement = null;
198        activeElementInst = null;
199        lastSelection = null;
200        break;
201      // Don't fire the event while the user is dragging. This matches the
202      // semantics of the native select event.
203      case TOP_MOUSE_DOWN:
204        mouseDown = true;
205        break;
206      case TOP_CONTEXT_MENU:
207      case TOP_MOUSE_UP:
208      case TOP_DRAG_END:
209        mouseDown = false;
210        return constructSelectEvent(nativeEvent, nativeEventTarget);
211      // Chrome and IE fire non-standard event when selection is changed (and
212      // sometimes when it hasn't). IE's event fires out of order with respect
213      // to key and input events on deletion, so we discard it.
214      //
215      // Firefox doesn't support selectionchange, so check selection status
216      // after each key entry. The selection changes after keydown and before
217      // keyup, but we check on keydown as well in the case of holding down a
218      // key, when multiple keydown events are fired but only one keyup is.
219      // This is also our approach for IE handling, for the reason above.
220      case TOP_SELECTION_CHANGE:
221        if (skipSelectionChangeEvent) {
222          break;
223        }
224      // falls through
225      case TOP_KEY_DOWN:
226      case TOP_KEY_UP:
227        return constructSelectEvent(nativeEvent, nativeEventTarget);
228    }
229
230    return null;
231  },
232};
233
234export default SelectEventPlugin;
235
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)