theKashey / focus-lock

Hi! I think one of our other libraries is using focus-lock, so I can't pinpoint the exact issue, but we're seeing this JavaScript error pop up in our monitors:

TypeError: r is not an Object. (evaluating '"focus"in r')

I think r is the minified version of target that I'm seeing on line 5 of the src/commands.ts file

if ('focus' in target) {
  target.focus(focusOptions);
}

Thanks for your attention!

Is it possible to provide a better callstack?

This function is not a problem because it is expecting target to be defined properly. Without understand what it is (if not an object) and why it's not what expected - no correction can be made

Sadly, our callstack is from webpack compressed code, so it may not be really useful. Our dependency is on react-focus-lock.

I'll post the last 8 steps from the trace....

Ce=function(e,t){var n=document&&me(),r=ve(e).filter(X),o=xe(n||e,e,r),a=new Map,i=ce(r,a),s=le(r,a).filter((function(e){var t=e.node;return X(t)}));if(s[0]||(s=i)[0]){var u,l,c,d,f=ce([o],a).map((function(e){return e.node})),p=(u=f,l=s,c=new Map,l.forEach((function(e){return c.set(e.node,e)})),u.map((function(e){return c.get(e)})).filter(ee)),m=p.map((function(e){return e.node})),h=je(m,f,n,t);if(h===Ee){var v=ue(i.map((function(e){return e.node}))).filter((d=function(e,t){return e.reduce((function(e,n){return e.concat(de(n,t))}),[])}(r,a),function(e){var t;return e.autofocus||!!(null===(t=Z(e))||void 0===t?void 0:t.autofocus)||d.indexOf(e)>=0}));return{node:v&&v.length?we(v):we(ue(m))}}return void 0===h?h:p[h]}},Ae=0,ke=!1,De=function(e,t,n){void 0===n&&(n={});var r,o,a=Ce(e,t);if(!ke&&a){if(Ae>2)return console.error("FocusLock: focus-fighting detected. Only one focus management system could be active. See https://github.com/theKashey/focus-lock/#focus-fighting"),ke=!0,void setTimeout((function(){ke=!1}),1);Ae++,r=a.node,o=n.focusOptions,"focus"in r&&r.focus(o),"contentWindow"in r&&r.contentWindow&&r.contentWindow.focus(),Ae--}},Pe=function(e){var t=ve(e).filter(X),n=xe(e,e,t),r=new Map,o=le([n],r,!0),a=le(t,r).filter((function(e){var t=e.node;return X(t)})).map((function(e){return e.node}));return o.map((function(e){var t=e.node;return{node:t,index:e.index,lockItem:a.indexOf(t)>=0,guard:Q(t)}}))};function Te(e){var t=window.setImmediate;void 0!==t?t(e):setTimeout(e,1)}var Ie=function(e,t){var n={};return n[e]=t,n},Ne=function(){return document&&document.activeElement===document.body||!!(e=document&&me())&&V(document.querySelectorAll("[".concat("data-no-focus-lock","]"))).some((function(t){return fe(t,e)}));var e},Re=null,Me=null,Fe=null,Le=!1,Ue=function(){return!0};function Be(e,t,n,r){var o=null,a=e;do{var i=r[a];if(i.guard)i.node.dataset.focusAutoGuard&&(o=i);else{if(!i.lockItem)break;if(a!==e)return;o=null}}while((a+=n)!==t);o&&(o.node.tabIndex=0)}var Ve=function(e){return e&&"current"in e?e.current:e},qe=function e(t,n,r){return n&&(n.host===t&&(!n.activeElement||r.contains(n.activeElement))||n.parentNode&&e(t,n.parentNode,r))},He=function(){var e,t=!1;if(Re){var n=Re,r=n.observed,o=n.persistentFocus,a=n.autoFocus,i=n.shards,s=n.crossFrame,u=n.focusOptions,l=r||Fe&&Fe.portaledElement,c=document&&document.activeElement;if(l){var d=[l].concat(i.map(Ve).filter(Boolean));if(c&&!function(e){return(Re.whiteList||Ue)(e)}(c)||(o||(s?Boolean(Le):"meanwhile"===Le)||!Ne()||!Me&&a)&&(l&&!(ge(d)||c&&function(e,t){return t.some((function(t){return qe(e,t,t)}))}(c,d)||(e=c,Fe&&Fe.portaledElement===e))&&(document&&!Me&&c&&!a?(c.blur&&c.blur(),document.body.focus()):(t=De(d,Me,{focusOptions:u}),Fe={})),Le=!1,Me=document&&document.activeElement),document){var f=document&&document.activeElement,p=Pe(d),m=p.map((function(e){return e.node})).indexOf(f);m>-1&&(p.filter((function(e){var t=e.guard,n=e.node;return t&&n.dataset.focusAutoGuard})).forEach((function(e){return e.node.removeAttribute("tabIndex")})),Be(m,p.length,1,p),Be(m,-1,-1,p))}}}return t},ze=function(e){He()&&e&&(e.stopPropagation(),e.preventDefault())},We=function(){return Te(He)},Ge=function(e){var t=e.target,n=e.currentTarget;n.contains(t)||(Fe={observerNode:n,portaledElement:t})},Ye=function(){Le="just",setTimeout((function(){Le="meanwhile"}),0)};x.assignSyncMedium(Ge),C.assignMedium(We),A.assignMedium((function(e){return e({moveFocusInside:De,focusInside:ge})}));var Ze,$e=B((function(e){return e.filter((function(e){return!e.disabled}))}),(function(e){var t=e.slice(-1)[0];t&&!Re&&(document.addEventListener("focusin",ze),document.addEventListener("focusout",We),window.addEventListener("blur",Ye));var n=Re,r=n&&t&&t.id===n.id;Re=t,n&&!r&&(n.onDeactivation(),e.filter((function(e){return e.id===n.id})).length||n.returnFocus(!t)),t?(Me=null,r&&n.observed===t.observed||t.onActivation(),He(),Te(He)):(document.removeEventListener("focusin",ze),document.removeEventListener("focusout",We),window.removeEventListener("blur",Ye),Me=null)}))((function(){return null}));F(k,$e);function Ke(){if(!document)return null;var e=document.createElement("style");e.type="text/css";var t=Ze||n.nc;return t&&e.setAttribute("nonce",t),e}var Je=function(){var e=0,t=null;return{add:function(n){var r,o;0==e&&(t=Ke())&&(o=n,(r=t).styleSheet?r.styleSheet.cssText=o:r.appendChild(document.createTextNode(o)),function(e){(document.head||document.getElementsByTagName("head")[0]).appendChild(e)}(t)),e++},remove:function(){!--e&&t&&(t.parentNode&&t.parentNode.removeChild(t),t=null)}}},

error at Ce in a=Ce(e,t)
trace from !function(e) in !function(e){return(Re.whiteList
trace from addEventListener in t&&!Re&&(document.addEventListener("focusin",ze)

if(!t)throw new Error("Sidecar: please provide `sideCar` property to import the right car");var i=t.read();if(!i)throw new Error("Sidecar medium not found");return a.createElement(i,r({},n))};function F(e,t){return e.useMedium(t),M}M.isSideCarExport=!0;var L=n("./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js"),U=n("./node_modules/@babel/runtime/helpers/esm/defineProperty.js");var B=function(e,t){return function(n){var r,o=[];function i(){r=e(o.map((function(e){return e.props}))),t(r)}

trace from return e.useMedium
trace from function in var B=function(e,t)

var n=e.memoizedProps,r=e.memoizedState;t=(e=t.stateNode).getSnapshotBeforeUpdate(t.elementType===t.type?n:Qo(t.type,n),r),e.__reactInternalSnapshotBeforeUpdate=t}return;case 3:return void(256&t.flags&&Yr(t.stateNode.containerInfo))}throw Error(i(163))}function ys(e,t,n){switch(n.tag){case 0:case 11:case 15:case 22:if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{if(3==(3&e.tag)){var r=e.create;e.destroy=r()}e=e.next}while(e!==t)}if(null!==(t=null!==(t=n.updateQueue)?t.lastEffect:null)){e=t=t.next;do{var o=e;r=o.next,0!=(4&(o=o.tag))&&0!=(1&o)&&(Fu(n,e),Mu(n,e)),e=r}while(e!==t)}return;case 1:return e=n.stateNode,4&n.flags&&(null===t?e.componentDidMount():(r=n.elementType===n.type?t.memoizedProps:Qo(n.type,t.memoizedProps),e.componentDidUpdate(r,t.memoizedState,e.__reactInternalSnapshotBeforeUpdate)))

trace from e.tag in 3==(3&e.tag)

u=b.textContent.length,E=Math.min(s.start,u),s=void 0===s.end?E:Math.min(s.end,u),!_.extend&&E>s&&(u=s,s=E,E=u),u=mr(b,E),a=mr(b,s),u&&a&&(1!==_.rangeCount||_.anchorNode!==u.node||_.anchorOffset!==u.offset||_.focusNode!==a.node||_.focusOffset!==a.offset)&&((w=w.createRange()).setStart(u.node,u.offset),_.removeAllRanges(),E>s?(_.addRange(w),_.extend(a.node,a.offset)):(w.setEnd(a.node,a.offset),_.addRange(w))))),w=[];for(_=b;_=_.parentNode;)1===_.nodeType&&w.push({element:_,left:_.scrollLeft,top:_.scrollTop});for("function"==typeof b.focus&&b.focus(),b=0;b<w.length;b++)(_=w[b]).element.scrollLeft=_.left,_.element.scrollTop=_.top}

trace from parentNode in _=b;_=_.parentNode

t.unstable_continueExecution=function(){T||P||(T=!0,n(M))},t.unstable_getCurrentPriorityLevel=function(){return D},t.unstable_getFirstCallbackNode=function(){return j(x)},t.unstable_next=function(e){switch(D){case 1:case 2:case 3:var t=3;break;default:t=D}var n=D;D=t;try{return e()}finally{D=n}},t.unstable_pauseExecution=function(){}

trace from D in switch(D){case 1

So that would be:

document.addEventListener('focusin', onTrap) -> https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L193
lastActiveTrap.whiteList -> https://github.com/theKashey/react-focus-lock/blob/master/src/Trap.js#L27
and then via moveFocusInside calls the function failed -

focus-lock/src/moveFocusInside.ts

Line 51 in 8144f2e

focusOn(focusable.node, options.focusOptions);
the only way to cause an error is 1) to have focusable defined, but 2) with node absent - https://github.com/theKashey/focus-lock/blob/master/src/focusSolver.ts#L73C10-L73C30

You are the first one to face this situation and I need your help to understand the issue.

➡️ please put a breakpoint (you can "break on error") and tell me what if focusable. Ie go one step back in the callstack.
If possible, try to understand what is happening in focusSolver.

I still need to understand your problem and your case. As the simplest solution - just share HTML code of the area inside the lock causing the problem, so I would be able to reproduce it.

Also please clarify why there is a problem capturing dev callstack - it is an error you can reproduce, or something caught by monitoring?

Should be suppressed in 1.0.1. The root cause is still unknown.

TypeError: target is not an Object.