search

jxom / bumbag-ui

Build themeable React & React Native applications with your Bumbag 👝
https://bumbag.style
MIT License
1.01k stars 50 forks source link

Autosuggest in Firefox: Uncaught TypeError: element.focus is not a function #33

Closed makkabi closed 4 years ago

makkabi commented 4 years ago

I installed a standard Create React App and used the Autosuggest snippet from the Docs in App.js. I tried the App in Firefox 79 on MacOS 10.15.6, and while it basically works, I get the errors below when I "play around" with the Autosuggest input. It's hard to describe, because I haven't figured out a way to 100% reproduce the problem. But I click in the Autosuggest, click on a suggestion, type something, click outside etc. The only thing that is always triggering the error is a click, be it outside the component, inside the input field or on a suggestion, it doesn't matter. Sometimes the error occurs with the first interactions after loading, sometimes everything is stable for a longer time, but I if this is nothing specific to my setup, I'm sure you will see the error quickly when trying the Autosuggest in Firefox. (Safari and Chromium Edge work fine.)

Below are the tow erros messages, one shows up in the console only, but sometimes (I didn't see any pattern) I get a "full page crash" error with some more details.

Error in the console only

Uncaught TypeError: element.focus is not a function onMouseDown Dialog.js:65 useDisclosureRef Dialog.js:69 React 6 commitHookEffectListMount commitPassiveHookEffects callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl unstable_runWithPriority scheduler.development.js:653 React 4 runWithPriority$1 flushPassiveEffects performSyncWorkOnRoot flushSyncCallbackQueueImpl unstable_runWithPriority scheduler.development.js:653 React 6 runWithPriority$1 flushSyncCallbackQueueImpl flushSyncCallbackQueue discreteUpdates$1 discreteUpdates dispatchDiscreteEvent Dialog.js:65 onMouseDown Dialog.js:65 (Async: EventListener.handleEvent) useDisclosureRef Dialog.js:69 React 6 commitHookEffectListMount commitPassiveHookEffects callCallback invokeGuardedCallbackDev invokeGuardedCallback flushPassiveEffectsImpl unstable_runWithPriority scheduler.development.js:653 React 3 runWithPriority$1 flushPassiveEffects performSyncWorkOnRoot performSyncWorkOnRoot self-hosted:982 flushSyncCallbackQueueImpl React unstable_runWithPriority scheduler.development.js:653 React 6 runWithPriority$1 flushSyncCallbackQueueImpl flushSyncCallbackQueue discreteUpdates$1 discreteUpdates dispatchDiscreteEvent bind_applyFunctionN self-hosted:1133 dispatchDiscreteEvent self-hosted:1096

This is the full page error I sometimes get:

TypeError: element.focus is not a function onMouseDown node_modules/reakit/es/Dialog/Dialog.js:65

62 | var onMouseDown = function onMouseDown(event) { 63 | var element = event.currentTarget; 64 | event.preventDefault();

65 | element.focus(); | ^ 66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

EventListener.handleEvent*useDisclosureRef/< node_modules/reakit/es/Dialog/Dialog.js:69

66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

69 | disclosure === null || disclosure === void 0 ? void 0 : disclosure.addEventListener("mousedown", onMouseDown); | ^ 70 | return function () { 71 | return disclosure === null || disclosure === void 0 ? void 0 : disclosure.removeEventListener("mousedown", onMouseDown); 72 | };

commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:19731

19728 | if ((effect.tag & tag) === tag) { 19729 | // Mount 19730 | var create = effect.create;

19731 | effect.destroy = create(); | ^ 19732 | 19733 | { 19734 | var destroy = effect.destroy;

commitPassiveHookEffects node_modules/react-dom/cjs/react-dom.development.js:19769

19766 | // before calling any create functions. The current approach only serializes 19767 | // these for a single fiber. 19768 | commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);

19769 | commitHookEffectListMount(Passive$1 | HasEffect, finishedWork); | ^ 19770 | break; 19771 | } 19772 | }

callCallback node_modules/react-dom/cjs/react-dom.development.js:188

185 | window.event = windowEvent; 186 | } 187 |

188 | func.apply(context, funcArgs); | ^ 189 | didError = false; 190 | } // Create a global error event handler. We use this to capture the value 191 | // that was thrown. It's possible that this error handler will fire more

invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:237

234 | // errors, it will trigger our global error handler. 235 | 236 | evt.initEvent(evtType, false, false);

237 | fakeNode.dispatchEvent(evt); | ^ 238 | 239 | if (windowEventDescriptor) { 240 | Object.defineProperty(window, 'event', windowEventDescriptor);

invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:292

289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) { 290 | hasError = false; 291 | caughtError = null;

292 | invokeGuardedCallbackImpl$1.apply(reporter, arguments); 293 | } 294 | /* 295 | Same as invokeGuardedCallback, but instead of returning an error, it stores

flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js:22853

22850 | while (_effect2 !== null) { 22851 | { 22852 | setCurrentFiber(_effect2);

22853 | invokeGuardedCallback(null, commitPassiveHookEffects, null, _effect2); | ^ 22854 | 22855 | if (hasCaughtError()) { 22856 | if (!(_effect2 !== null)) {

unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js:22820

22817 | if (pendingPassiveEffectsRenderPriority !== NoPriority) { 22818 | var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority ? NormalPriority : pendingPassiveEffectsRenderPriority; 22819 | pendingPassiveEffectsRenderPriority = NoPriority;

22820 | return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl); 22821 | } 22822 | } 22823 |

performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21737

21734 | } 21735 | } 21736 |

21737 | flushPassiveEffects(); // If the root or expiration time have changed, throw out the existing stack | ^ 21738 | // and prepare a fresh one. Otherwise we'll continue where we left off. 21739 | 21740 | if (root !== workInProgressRoot || expirationTime !== renderExpirationTime$1) {

flushSyncCallbackQueueImpl/< node_modules/react-dom/cjs/react-dom.development.js:11089

11086 | var callback = queue[i]; 11087 | 11088 | do {

11089 | callback = callback(_isSync); | ^ 11090 | } while (callback !== null); 11091 | } 11092 | });

unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

flushSyncCallbackQueueImpl node_modules/react-dom/cjs/react-dom.development.js:11084

11081 | try { 11082 | var _isSync = true; 11083 | var queue = syncQueue;

11084 | runWithPriority$1(ImmediatePriority, function () { | ^ 11085 | for (; i < queue.length; i++) { 11086 | var callback = queue[i]; 11087 |

flushSyncCallbackQueue node_modules/react-dom/cjs/react-dom.development.js:11072

11069 | Scheduler_cancelCallback(node); 11070 | } 11071 |

11072 | flushSyncCallbackQueueImpl(); 11073 | } 11074 | 11075 | function flushSyncCallbackQueueImpl() {

discreteUpdates$1 node_modules/react-dom/cjs/react-dom.development.js:21893

21890 | 21891 | if (executionContext === NoContext) { 21892 | // Flush the immediate callbacks that were scheduled during this batch

21893 | flushSyncCallbackQueue(); 21894 | } 21895 | } 21896 | }

discreteUpdates node_modules/react-dom/cjs/react-dom.development.js:806

803 | isInsideEventHandler = true; 804 | 805 | try {

806 | return discreteUpdatesImpl(fn, a, b, c, d); | ^ 807 | } finally { 808 | isInsideEventHandler = prevIsInsideEventHandler; 809 |

dispatchDiscreteEvent node_modules/react-dom/cjs/react-dom.development.js:4168

4165 | 4166 | function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) { 4167 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);

4168 | discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent); 4169 | } 4170 | 4171 | function dispatchUserBlockingUpdate(topLevelType, eventSystemFlags, container, nativeEvent) {

EventListener.handleEvent*addEventCaptureListener node_modules/react-dom/cjs/react-dom.development.js:4030

4027 | element.addEventListener(eventType, listener, false); 4028 | } 4029 | function addEventCaptureListener(element, eventType, listener) {

4030 | element.addEventListener(eventType, listener, true); 4031 | } 4032 | 4033 | // do it in two places, which duplicates logic

trapEventForPluginEventSystem node_modules/react-dom/cjs/react-dom.development.js:4160

4157 | var rawEventName = getRawEventName(topLevelType); 4158 | 4159 | if (capture) {

4160 | addEventCaptureListener(container, rawEventName, listener); | ^ 4161 | } else { 4162 | addEventBubbleListener(container, rawEventName, listener); 4163 | }

trapCapturedEvent node_modules/react-dom/cjs/react-dom.development.js:4136

4133 | trapEventForPluginEventSystem(element, topLevelType, false); 4134 | } 4135 | function trapCapturedEvent(topLevelType, element) {

4136 | trapEventForPluginEventSystem(element, topLevelType, true); 4137 | } 4138 | 4139 | function trapEventForPluginEventSystem(container, topLevelType, capture) {

legacyListenToTopLevelEvent node_modules/react-dom/cjs/react-dom.development.js:3613

3610 | 3611 | case TOP_FOCUS: 3612 | case TOP_BLUR:

3613 | trapCapturedEvent(TOP_FOCUS, mountAt); | ^ 3614 | trapCapturedEvent(TOP_BLUR, mountAt); // We set the flag for a single dependency later in this function, 3615 | // but this ensures we mark both as attached rather than just one. 3616 |

legacyListenToEvent node_modules/react-dom/cjs/react-dom.development.js:3601

3598 | 3599 | for (var i = 0; i < dependencies.length; i++) { 3600 | var dependency = dependencies[i];

3601 | legacyListenToTopLevelEvent(dependency, mountAt, listenerMap); 3602 | } 3603 | } 3604 | function legacyListenToTopLevelEvent(topLevelType, mountAt, listenerMap) {

ensureListeningTo node_modules/react-dom/cjs/react-dom.development.js:5761

5758 | function ensureListeningTo(rootContainerElement, registrationName) { 5759 | var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE; 5760 | var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;

5761 | legacyListenToEvent(registrationName, doc); 5762 | } 5763 | 5764 | function getOwnerDocumentFromRootContainer(rootContainerElement) {

setInitialProperties node_modules/react-dom/cjs/react-dom.development.js:5995

5992 | trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening 5993 | // to onChange. Even if there is no listener. 5994 |

5995 | ensureListeningTo(rootContainerElement, 'onChange'); | ^ 5996 | break; 5997 | 5998 | case 'option':

finalizeInitialChildren node_modules/react-dom/cjs/react-dom.development.js:7499

7496 | parentInstance.appendChild(child); 7497 | } 7498 | function finalizeInitialChildren(domElement, type, props, rootContainerInstance, hostContext) {

7499 | setInitialProperties(domElement, type, props, rootContainerInstance); 7500 | return shouldAutoFocusHostComponent(type, props); 7501 | } 7502 | function prepareUpdate(domElement, type, oldProps, newProps, rootContainerInstance, hostContext) {

completeWork node_modules/react-dom/cjs/react-dom.development.js:18978

18975 | // Make sure such renderers get scheduled for later work. 18976 | 18977 |

18978 | if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) { | ^ 18979 | markUpdate(workInProgress); 18980 | } 18981 | }

completeUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22192

22189 | next = completeWork(current, workInProgress, renderExpirationTime$1); 22190 | } else { 22191 | startProfilerTimer(workInProgress);

22192 | next = completeWork(current, workInProgress, renderExpirationTime$1); // Update render duration assuming we didn't error. | ^ 22193 | 22194 | stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false); 22195 | }

performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22165

22162 | 22163 | if (next === null) { 22164 | // If this doesn't spawn new work, complete the current work.

22165 | next = completeUnitOfWork(unitOfWork); | ^ 22166 | } 22167 | 22168 | ReactCurrentOwner$2.current = null;

workLoopSync node_modules/react-dom/cjs/react-dom.development.js:22130

22127 | function workLoopSync() { 22128 | // Already timed out, so perform work without checking if we need to yield. 22129 | while (workInProgress !== null) {

22130 | workInProgress = performUnitOfWork(workInProgress); 22131 | } 22132 | } 22133 | /* @noinline /

performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21756

21753 | 21754 | do { 21755 | try {

21756 | workLoopSync(); | ^ 21757 | break; 21758 | } catch (thrownValue) { 21759 | handleError(root, thrownValue);

scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js:21188

21185 | // root inside of batchedUpdates should be synchronous, but layout updates 21186 | // should be deferred until the end of the batch. 21187 |

21188 | performSyncWorkOnRoot(root); | ^ 21189 | } else { 21190 | ensureRootIsScheduled(root); 21191 | schedulePendingInteractions(root, expirationTime);

updateContainer node_modules/react-dom/cjs/react-dom.development.js:24373

24370 | } 24371 | 24372 | enqueueUpdate(current$1, update);

24373 | scheduleWork(current$1, expirationTime); 24374 | return expirationTime; 24375 | } 24376 | function getPublicRootInstance(container) {

legacyRenderSubtreeIntoContainer/< node_modules/react-dom/cjs/react-dom.development.js:24758

24755 | 24756 | 24757 | unbatchedUpdates(function () {

24758 | updateContainer(children, fiberRoot, parentComponent, callback); | ^ 24759 | }); 24760 | } else { 24761 | fiberRoot = root._internalRoot;

unbatchedUpdates node_modules/react-dom/cjs/react-dom.development.js:21903

21900 | executionContext |= LegacyUnbatchedContext; 21901 | 21902 | try {

21903 | return fn(a); | ^ 21904 | } finally { 21905 | executionContext = prevExecutionContext; 21906 |

legacyRenderSubtreeIntoContainer node_modules/react-dom/cjs/react-dom.development.js:24757

24754 | } // Initial mount should not be batched. 24755 | 24756 |

24757 | unbatchedUpdates(function () { | ^ 24758 | updateContainer(children, fiberRoot, parentComponent, callback); 24759 | }); 24760 | } else {

render node_modules/react-dom/cjs/react-dom.development.js:24840

24837 | } 24838 | } 24839 |

24840 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback); 24841 | } 24842 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) { 24843 | if (!isValidContainer(containerNode)) {

./src/index.js src/index.js:8

5 | 6 | import App from "./App"; 7 |

8 | ReactDOM.render( 9 | 10 | 11 |

__webpack_require__ /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

781 | }; 782 | 783 | // Execute the module function

784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

fn /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:150

147 | ); 148 | hotCurrentParents = []; 149 | }

150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {

1 http://localhost:3000/static/js/main.chunk.js:271:18 __webpack_require__ /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

781 | }; 782 | 783 | // Execute the module function

784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

checkDeferredModules /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:45

42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1);

45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 |

webpackJsonpCallback /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:32

29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready

32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result;

(anonymous function) http://localhost:3000/static/js/main.chunk.js:1:75

jxom commented 4 years ago

Fixed on 1.0.11

makkabi commented 4 years ago

@jxom Sorry, this isn't fixed, same issues after updating (and then also re-installing) Bumbag. Below is the full screen error. Let me know if you need more details.

TypeError: element.focus is not a function onMouseDown node_modules/reakit/es/Dialog/Dialog.js:65

62 | var onMouseDown = function onMouseDown(event) { 63 | var element = event.currentTarget; 64 | event.preventDefault();

65 | element.focus(); | ^ 66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

EventListener.handleEvent*useDisclosureRef/< node_modules/reakit/es/Dialog/Dialog.js:69

66 | }; 67 | 68 | var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current;

69 | disclosure === null || disclosure === void 0 ? void 0 : disclosure.addEventListener("mousedown", onMouseDown); | ^ 70 | return function () { 71 | return disclosure === null || disclosure === void 0 ? void 0 : disclosure.removeEventListener("mousedown", onMouseDown); 72 | };

commitHookEffectListMount node_modules/react-dom/cjs/react-dom.development.js:19731

19728 | if ((effect.tag & tag) === tag) { 19729 | // Mount 19730 | var create = effect.create;

19731 | effect.destroy = create(); | ^ 19732 | 19733 | { 19734 | var destroy = effect.destroy;

commitPassiveHookEffects node_modules/react-dom/cjs/react-dom.development.js:19769

19766 | // before calling any create functions. The current approach only serializes 19767 | // these for a single fiber. 19768 | commitHookEffectListUnmount(Passive$1 | HasEffect, finishedWork);

19769 | commitHookEffectListMount(Passive$1 | HasEffect, finishedWork); | ^ 19770 | break; 19771 | } 19772 | }

callCallback node_modules/react-dom/cjs/react-dom.development.js:188

185 | window.event = windowEvent; 186 | } 187 |

188 | func.apply(context, funcArgs); | ^ 189 | didError = false; 190 | } // Create a global error event handler. We use this to capture the value 191 | // that was thrown. It's possible that this error handler will fire more

invokeGuardedCallbackDev node_modules/react-dom/cjs/react-dom.development.js:237

234 | // errors, it will trigger our global error handler. 235 | 236 | evt.initEvent(evtType, false, false);

237 | fakeNode.dispatchEvent(evt); | ^ 238 | 239 | if (windowEventDescriptor) { 240 | Object.defineProperty(window, 'event', windowEventDescriptor);

invokeGuardedCallback node_modules/react-dom/cjs/react-dom.development.js:292

289 | function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) { 290 | hasError = false; 291 | caughtError = null;

292 | invokeGuardedCallbackImpl$1.apply(reporter, arguments); 293 | } 294 | /* 295 | Same as invokeGuardedCallback, but instead of returning an error, it stores

flushPassiveEffectsImpl node_modules/react-dom/cjs/react-dom.development.js:22853

22850 | while (_effect2 !== null) { 22851 | { 22852 | setCurrentFiber(_effect2);

22853 | invokeGuardedCallback(null, commitPassiveHookEffects, null, _effect2); | ^ 22854 | 22855 | if (hasCaughtError()) { 22856 | if (!(_effect2 !== null)) {

unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

flushPassiveEffects node_modules/react-dom/cjs/react-dom.development.js:22820

22817 | if (pendingPassiveEffectsRenderPriority !== NoPriority) { 22818 | var priorityLevel = pendingPassiveEffectsRenderPriority > NormalPriority ? NormalPriority : pendingPassiveEffectsRenderPriority; 22819 | pendingPassiveEffectsRenderPriority = NoPriority;

22820 | return runWithPriority$1(priorityLevel, flushPassiveEffectsImpl); 22821 | } 22822 | } 22823 |

performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21737

21734 | } 21735 | } 21736 |

21737 | flushPassiveEffects(); // If the root or expiration time have changed, throw out the existing stack | ^ 21738 | // and prepare a fresh one. Otherwise we'll continue where we left off. 21739 | 21740 | if (root !== workInProgressRoot || expirationTime !== renderExpirationTime$1) {

flushSyncCallbackQueueImpl/< node_modules/react-dom/cjs/react-dom.development.js:11089

11086 | var callback = queue[i]; 11087 | 11088 | do {

11089 | callback = callback(_isSync); | ^ 11090 | } while (callback !== null); 11091 | } 11092 | });

unstable_runWithPriority node_modules/scheduler/cjs/scheduler.development.js:653

650 | currentPriorityLevel = priorityLevel; 651 | 652 | try {

653 | return eventHandler(); | ^ 654 | } finally { 655 | currentPriorityLevel = previousPriorityLevel; 656 | }

runWithPriority$1 node_modules/react-dom/cjs/react-dom.development.js:11039

11036 | 11037 | function runWithPriority$1(reactPriorityLevel, fn) { 11038 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

11039 | return Scheduler_runWithPriority(priorityLevel, fn); 11040 | } 11041 | function scheduleCallback(reactPriorityLevel, callback, options) { 11042 | var priorityLevel = reactPriorityToSchedulerPriority(reactPriorityLevel);

flushSyncCallbackQueueImpl node_modules/react-dom/cjs/react-dom.development.js:11084

11081 | try { 11082 | var _isSync = true; 11083 | var queue = syncQueue;

11084 | runWithPriority$1(ImmediatePriority, function () { | ^ 11085 | for (; i < queue.length; i++) { 11086 | var callback = queue[i]; 11087 |

flushSyncCallbackQueue node_modules/react-dom/cjs/react-dom.development.js:11072

11069 | Scheduler_cancelCallback(node); 11070 | } 11071 |

11072 | flushSyncCallbackQueueImpl(); 11073 | } 11074 | 11075 | function flushSyncCallbackQueueImpl() {

discreteUpdates$1 node_modules/react-dom/cjs/react-dom.development.js:21893

21890 | 21891 | if (executionContext === NoContext) { 21892 | // Flush the immediate callbacks that were scheduled during this batch

21893 | flushSyncCallbackQueue(); 21894 | } 21895 | } 21896 | }

discreteUpdates node_modules/react-dom/cjs/react-dom.development.js:806

803 | isInsideEventHandler = true; 804 | 805 | try {

806 | return discreteUpdatesImpl(fn, a, b, c, d); | ^ 807 | } finally { 808 | isInsideEventHandler = prevIsInsideEventHandler; 809 |

dispatchDiscreteEvent node_modules/react-dom/cjs/react-dom.development.js:4168

4165 | 4166 | function dispatchDiscreteEvent(topLevelType, eventSystemFlags, container, nativeEvent) { 4167 | flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);

4168 | discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, container, nativeEvent); 4169 | } 4170 | 4171 | function dispatchUserBlockingUpdate(topLevelType, eventSystemFlags, container, nativeEvent) {

EventListener.handleEvent*addEventCaptureListener node_modules/react-dom/cjs/react-dom.development.js:4030

4027 | element.addEventListener(eventType, listener, false); 4028 | } 4029 | function addEventCaptureListener(element, eventType, listener) {

4030 | element.addEventListener(eventType, listener, true); 4031 | } 4032 | 4033 | // do it in two places, which duplicates logic

trapEventForPluginEventSystem node_modules/react-dom/cjs/react-dom.development.js:4160

4157 | var rawEventName = getRawEventName(topLevelType); 4158 | 4159 | if (capture) {

4160 | addEventCaptureListener(container, rawEventName, listener); | ^ 4161 | } else { 4162 | addEventBubbleListener(container, rawEventName, listener); 4163 | }

trapCapturedEvent node_modules/react-dom/cjs/react-dom.development.js:4136

4133 | trapEventForPluginEventSystem(element, topLevelType, false); 4134 | } 4135 | function trapCapturedEvent(topLevelType, element) {

4136 | trapEventForPluginEventSystem(element, topLevelType, true); 4137 | } 4138 | 4139 | function trapEventForPluginEventSystem(container, topLevelType, capture) {

legacyListenToTopLevelEvent node_modules/react-dom/cjs/react-dom.development.js:3613

3610 | 3611 | case TOP_FOCUS: 3612 | case TOP_BLUR:

3613 | trapCapturedEvent(TOP_FOCUS, mountAt); | ^ 3614 | trapCapturedEvent(TOP_BLUR, mountAt); // We set the flag for a single dependency later in this function, 3615 | // but this ensures we mark both as attached rather than just one. 3616 |

legacyListenToEvent node_modules/react-dom/cjs/react-dom.development.js:3601

3598 | 3599 | for (var i = 0; i < dependencies.length; i++) { 3600 | var dependency = dependencies[i];

3601 | legacyListenToTopLevelEvent(dependency, mountAt, listenerMap); 3602 | } 3603 | } 3604 | function legacyListenToTopLevelEvent(topLevelType, mountAt, listenerMap) {

ensureListeningTo node_modules/react-dom/cjs/react-dom.development.js:5761

5758 | function ensureListeningTo(rootContainerElement, registrationName) { 5759 | var isDocumentOrFragment = rootContainerElement.nodeType === DOCUMENT_NODE || rootContainerElement.nodeType === DOCUMENT_FRAGMENT_NODE; 5760 | var doc = isDocumentOrFragment ? rootContainerElement : rootContainerElement.ownerDocument;

5761 | legacyListenToEvent(registrationName, doc); 5762 | } 5763 | 5764 | function getOwnerDocumentFromRootContainer(rootContainerElement) {

setInitialProperties node_modules/react-dom/cjs/react-dom.development.js:5995

5992 | trapBubbledEvent(TOP_INVALID, domElement); // For controlled components we always need to ensure we're listening 5993 | // to onChange. Even if there is no listener. 5994 |

5995 | ensureListeningTo(rootContainerElement, 'onChange'); | ^ 5996 | break; 5997 | 5998 | case 'option':

finalizeInitialChildren node_modules/react-dom/cjs/react-dom.development.js:7499

7496 | parentInstance.appendChild(child); 7497 | } 7498 | function finalizeInitialChildren(domElement, type, props, rootContainerInstance, hostContext) {

7499 | setInitialProperties(domElement, type, props, rootContainerInstance); 7500 | return shouldAutoFocusHostComponent(type, props); 7501 | } 7502 | function prepareUpdate(domElement, type, oldProps, newProps, rootContainerInstance, hostContext) {

completeWork node_modules/react-dom/cjs/react-dom.development.js:18978

18975 | // Make sure such renderers get scheduled for later work. 18976 | 18977 |

18978 | if (finalizeInitialChildren(instance, type, newProps, rootContainerInstance)) { | ^ 18979 | markUpdate(workInProgress); 18980 | } 18981 | }

completeUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22192

22189 | next = completeWork(current, workInProgress, renderExpirationTime$1); 22190 | } else { 22191 | startProfilerTimer(workInProgress);

22192 | next = completeWork(current, workInProgress, renderExpirationTime$1); // Update render duration assuming we didn't error. | ^ 22193 | 22194 | stopProfilerTimerIfRunningAndRecordDelta(workInProgress, false); 22195 | }

performUnitOfWork node_modules/react-dom/cjs/react-dom.development.js:22165

22162 | 22163 | if (next === null) { 22164 | // If this doesn't spawn new work, complete the current work.

22165 | next = completeUnitOfWork(unitOfWork); | ^ 22166 | } 22167 | 22168 | ReactCurrentOwner$2.current = null;

workLoopSync node_modules/react-dom/cjs/react-dom.development.js:22130

22127 | function workLoopSync() { 22128 | // Already timed out, so perform work without checking if we need to yield. 22129 | while (workInProgress !== null) {

22130 | workInProgress = performUnitOfWork(workInProgress); 22131 | } 22132 | } 22133 | /* @noinline /

performSyncWorkOnRoot node_modules/react-dom/cjs/react-dom.development.js:21756

21753 | 21754 | do { 21755 | try {

21756 | workLoopSync(); | ^ 21757 | break; 21758 | } catch (thrownValue) { 21759 | handleError(root, thrownValue);

scheduleUpdateOnFiber node_modules/react-dom/cjs/react-dom.development.js:21188

21185 | // root inside of batchedUpdates should be synchronous, but layout updates 21186 | // should be deferred until the end of the batch. 21187 |

21188 | performSyncWorkOnRoot(root); | ^ 21189 | } else { 21190 | ensureRootIsScheduled(root); 21191 | schedulePendingInteractions(root, expirationTime);

updateContainer node_modules/react-dom/cjs/react-dom.development.js:24373

24370 | } 24371 | 24372 | enqueueUpdate(current$1, update);

24373 | scheduleWork(current$1, expirationTime); 24374 | return expirationTime; 24375 | } 24376 | function getPublicRootInstance(container) {

legacyRenderSubtreeIntoContainer/< node_modules/react-dom/cjs/react-dom.development.js:24758

24755 | 24756 | 24757 | unbatchedUpdates(function () {

24758 | updateContainer(children, fiberRoot, parentComponent, callback); | ^ 24759 | }); 24760 | } else { 24761 | fiberRoot = root._internalRoot;

unbatchedUpdates node_modules/react-dom/cjs/react-dom.development.js:21903

21900 | executionContext |= LegacyUnbatchedContext; 21901 | 21902 | try {

21903 | return fn(a); | ^ 21904 | } finally { 21905 | executionContext = prevExecutionContext; 21906 |

legacyRenderSubtreeIntoContainer node_modules/react-dom/cjs/react-dom.development.js:24757

24754 | } // Initial mount should not be batched. 24755 | 24756 |

24757 | unbatchedUpdates(function () { | ^ 24758 | updateContainer(children, fiberRoot, parentComponent, callback); 24759 | }); 24760 | } else {

render node_modules/react-dom/cjs/react-dom.development.js:24840

24837 | } 24838 | } 24839 |

24840 | return legacyRenderSubtreeIntoContainer(null, element, container, false, callback); 24841 | } 24842 | function unstable_renderSubtreeIntoContainer(parentComponent, element, containerNode, callback) { 24843 | if (!isValidContainer(containerNode)) {

./src/index.js src/index.js:8

5 | 6 | import App from "./App"; 7 |

8 | ReactDOM.render( 9 | 10 | 11 |

__webpack_require__ /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

781 | }; 782 | 783 | // Execute the module function

784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

fn /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:150

147 | ); 148 | hotCurrentParents = []; 149 | }

150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {

1 http://localhost:3000/static/js/main.chunk.js:277:18 __webpack_require__ /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:784

781 | }; 782 | 783 | // Execute the module function

784 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 785 | 786 | // Flag the module as loaded 787 | module.l = true;

checkDeferredModules /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:45

42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1);

45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 |

webpackJsonpCallback /Users/wwb/Projekte/Ignore/bumbag/webpack/bootstrap:32

29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready

32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result;

(anonymous function) http://localhost:3000/static/js/main.chunk.js:1:75

jxom commented 4 years ago

Hmm still in Firefox?? I can't seem to reproduce. Try upgrade to 1.1.2. I fixed an issue where Bumbag was using the deprecated MenuDisclosure API in Reakit.

makkabi commented 4 years ago

@jxom Same same in version 1.1.2, sorry. I also just tried it in a clean Firefox Developer Edition, with no plugins etc. The rest is a basic Create React App. (Btw., I switched to AutosuggestField, but it's the same with Autosuggest.) I only changed two files:

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import { Provider as BumbagProvider } from "bumbag";

import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <BumbagProvider>
      <App />
    </BumbagProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js

import React, { useState } from "react";

import "./App.css";

import { AutosuggestField } from "bumbag";

function App() {
  const [value, setValue] = useState({ label: "" });
  console.log(value);
  return (
    <div className="App">
      <AutosuggestField
        label="Choose your fruit"
        options={[
          { key: 1, label: "Apple", value: { name: "apple" } },
          { key: 2, label: "Oranges", value: { name: "oranges" } },
        ]}
        placeholder="Search for a fruit..."
        value={{ label: "" }}
        onChange={setValue}
      />
    </div>
  );
}

export default App;
jxom commented 4 years ago

Hmm, yeah now I can reproduce on Firefox Developer Edition... However, seems to work fine in stable Firefox...

makkabi commented 4 years ago

@jxom I just tried it in a pretty clean Windows installation via Bootcamp, and it's the same issue in Firefox 79 (stable), so nothing Mac specific, and also the same in Firefox 79 and 80.

jxom commented 4 years ago

Can you try upgrade to 1.1.3? I think I fixed it. 😅

makkabi commented 4 years ago

@jxom Sorry, nothing changed. I looked at the code myself and did some debugging. The problem is that in node_modules/reakit/es/Dialog/Dialog.js:65 the element is sometimes the HTMLDocument, which has no focus method. You could do something like this, and it seems to work:

      if ('focus' in element){
          event.preventDefault();
         element.focus();
      }

But that would be just a quick fix with possible side effects, since I don't fully understand the context of this code.

jxom commented 4 years ago

Seems to be coming from Reakit. @diegohaz - Would you happen to know what would cause this issue?

diegohaz commented 4 years ago

I guess we should check if "focus" in target here before setting ref.current and options.unstable_disclosureRef: https://github.com/reakit/reakit/blob/ab6cacce8adc8a39125a263519fb14563598febc/packages/reakit/src/Dialog/__utils/useDisclosureRef.ts#L16-L20

If you have some time, I'll accept a PR. Otherwise I can take a look into it over the weekend.

jxom commented 4 years ago

This should be fixed on 1.1.6 now.