Clicking on a note does not navigate to it

Bug report

Clicking on a note does not navigate to it. There is a console error:

Uncaught (in promise) Error: Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
    at invariant (/usr/lib/inkdrop/resources/app.asar/node_modules/react/node_modules/fbjs/lib/invariant.js:35:15)
    at Object.dangerouslyRenderMarkup (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Danger.js:116:211)
    at Object.processUpdates (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/DOMChildrenOperations.js:89:31)
    at Object.dangerouslyProcessChildrenUpdates (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMIDOperations.js:85:27)
    at Object.wrapper [as processChildrenUpdates] (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66:21)
    at processQueue (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactMultiChild.js:160:31)
    at ReactDOMComponent.updateChildren (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactMultiChild.js:334:13)
    at ReactDOMComponent._updateDOMChildren (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:871:12)
    at ReactDOMComponent.updateComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:700:10)
    at ReactDOMComponent.receiveComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:645:10)
    at Object.receiveComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:87:22)
    at ReactCompositeComponentWrapper._updateRenderedComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:562:23)
    at ReactCompositeComponentWrapper._performComponentUpdate (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:544:10)
    at ReactCompositeComponentWrapper.updateComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:473:12)
    at ReactCompositeComponentWrapper.wrapper [as updateComponent] (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66:21)
    at ReactCompositeComponentWrapper.receiveComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:405:10)
    at Object.receiveComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:87:22)
    at ReactCompositeComponentWrapper._updateRenderedComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:562:23)
    at ReactCompositeComponentWrapper._performComponentUpdate (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:544:10)
    at ReactCompositeComponentWrapper.updateComponent (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:473:12)
    at ReactCompositeComponentWrapper.wrapper [as updateComponent] (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66:21)
    at ReactCompositeComponentWrapper.performUpdateIfNecessary (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:421:12)
    at Object.performUpdateIfNecessary (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:102:22)
    at runBatchedUpdates (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:129:21)
    at ReactReconcileTransaction.perform (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:136:20)
    at ReactUpdatesFlushTransaction.perform (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:136:20)
    at ReactUpdatesFlushTransaction.perform (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:86:38)
    at Object.flushBatchedUpdates (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:147:19)
    at Object.wrapper [as flushBatchedUpdates] (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66:21)
    at ReactDefaultBatchingStrategyTransaction.closeAll (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:202:25)
    at ReactDefaultBatchingStrategyTransaction.perform (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:149:16)
    at Object.batchedUpdates (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDefaultBatchingStrategy.js:62:19)
    at Object.enqueueUpdate (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:176:22)
    at enqueueUpdate (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:24:16)
    at Object.enqueueSetState (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:190:5)
    at Constructor.ReactComponent.setState (/usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactComponent.js:65:16)
    at Constructor.onChange (/usr/lib/inkdrop/resources/app.asar/node_modules/alt-utils/lib/connectToStores.js:101:14)
    at /usr/lib/inkdrop/resources/app.asar/node_modules/transmitter/dist/transmitter.js:34:50
    at Array.forEach (native)
    at Object.publish (/usr/lib/inkdrop/resources/app.asar/node_modules/transmitter/dist/transmitter.js:33:21)
    at emitChange (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:171878)
    at Object.dispatchToken.e.dispatcher.register.e [as ID_1] (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:172461)
    at Dispatcher._invokeCallback (/usr/lib/inkdrop/resources/app.asar/node_modules/flux/lib/Dispatcher.js:198:24)
    at Dispatcher.dispatch (/usr/lib/inkdrop/resources/app.asar/node_modules/flux/lib/Dispatcher.js:174:14)
    at batchingFunction (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:165219)
    at e.batchingFunction.e.batchingFunction.e [as batchingFunction] (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:164708)
    at e.dispatch (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:164907)
    at c (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:176251)
    at Object.u [as openFailure] (file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:176384)
    at file:///usr/lib/inkdrop/resources/app.asar/browser-main.js:1:8787
    at <anonymous>
invariant @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/node_modules/fbjs/lib/invariant.js:35
dangerouslyRenderMarkup @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Danger.js:116
processUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/DOMChildrenOperations.js:89
dangerouslyProcessChildrenUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMIDOperations.js:85
ReactDOMIDOperations_dangerouslyProcessChildrenUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66
processQueue @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactMultiChild.js:160
updateChildren @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactMultiChild.js:334
_updateDOMChildren @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:871
updateComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:700
receiveComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDOMComponent.js:645
receiveComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:87
_updateRenderedComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:562
_performComponentUpdate @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:544
updateComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:473
ReactCompositeComponent_updateComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66
receiveComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:405
receiveComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:87
_updateRenderedComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:562
_performComponentUpdate @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:544
updateComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:473
ReactCompositeComponent_updateComponent @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66
performUpdateIfNecessary @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactCompositeComponent.js:421
performUpdateIfNecessary @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactReconciler.js:102
runBatchedUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:129
perform @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:136
perform @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:136
perform @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:86
flushBatchedUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:147
ReactUpdates_flushBatchedUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactPerf.js:66
closeAll @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:202
perform @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/Transaction.js:149
batchedUpdates @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactDefaultBatchingStrategy.js:62
enqueueUpdate @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdates.js:176
enqueueUpdate @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:24
enqueueSetState @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactUpdateQueue.js:190
ReactComponent.setState @ /usr/lib/inkdrop/resources/app.asar/node_modules/react/lib/ReactComponent.js:65
onChange @ /usr/lib/inkdrop/resources/app.asar/node_modules/alt-utils/lib/connectToStores.js:101
(anonymous) @ /usr/lib/inkdrop/resources/app.asar/node_modules/transmitter/dist/transmitter.js:34
publish @ /usr/lib/inkdrop/resources/app.asar/node_modules/transmitter/dist/transmitter.js:33
emitChange @ browser-main.js:1
dispatchToken.e.dispatcher.register.e @ browser-main.js:1
_invokeCallback @ /usr/lib/inkdrop/resources/app.asar/node_modules/flux/lib/Dispatcher.js:198
dispatch @ /usr/lib/inkdrop/resources/app.asar/node_modules/flux/lib/Dispatcher.js:174
batchingFunction @ browser-main.js:1
batchingFunction.e.batchingFunction.e @ browser-main.js:1
dispatch @ browser-main.js:1
c @ browser-main.js:1
u @ browser-main.js:1
(anonymous) @ browser-main.js:1

Info

  • Platform: Ubuntu
  • Platform version: 16.04.5 LTS
  • App Version: 3.22.4

Reproduce

Open Inkdrop, search for a note, click several notes and the navigation will be broken.

Hi David,

Thank you for reporting it.
That’s weird. I guess you have a note with inline HTML that causes the problem?
Please check if it only happens after opening the note with inline HTML.
Inline HTML is unstable at the moment.
Currently I’m rebuilding the desktop app and I will work on the issue.

Related issue:

Hey Takuya,

Here’s a markdown version of a note this happens with, the note is over a year old and it was not happening before.

target vs currentTarget vs delegateTarget

function hide(e){
  // e.target refers to the clicked <li> element
  // This is different than e.currentTarget which would refer to the parent <ul> in this context
  e.target.style.visibility = 'hidden';
}

// Attach the listener to the list
// It will fire when each <li> is clicked
ul.addEventListener('click', hide, false);

target

Source

A reference to the object that dispatched the event. It is different from event.currentTarget when the event handler is called during the bubbling or capturing phase of the event.

currentTarget

Source

Identifies the current target for the event, as the event traverses the DOM. It always refers to the element to which the event handler has been attached, as opposed to event.target which identifies the element on which the event occurred.

delegateTarget

Source

The element where the currently-called jQuery event handler was attached. (Similar to currentTarget).

For non-delegated event handlers attached directly to an element, event.delegateTarget will always be equal to event.currentTarget.

Example:

Usual event binding

<div>
  <a href="#">Click me</>
</div>
$(function() {
  $('div').on('click', function(e) {
    console.log(this)              // this === e.currentTarget, the element that has 
                                   // the event attached
    console.log(e.target);         // <a>   who activated the event
    console.log(e.currentTarget);  // <div> who's handling the event
    console.log(e.delegateTarget); // <div> who's handling the delegation (there's 
                                   // none here, so then who's handling the event
  });
}

Using delegation

  $('div').on('click', 'a', function(e) {
    console.log(this)              // this === e.target === 'a', 'div' is just the
                                   // delegator, <a> actually "has" the event attached
    console.log(e.target);         // <a> who activated the event
    console.log(e.currentTarget);  // <a> who's handling the event, <a> actually is.
                                   // <div> was just delegated to point who handled it
                                         
    console.log(e.delegateTarget); // <div> who's handlign the delegation 
                                   // <div> is, he's the delegator
  });

Hi David,

Thank you for letting me know that.
It seems like your note has an invalid inline HTML at line 34:

<header style="box-sizing: border-box; display: block; color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;, HelveticaNeue, Helvetica, Arial, sans-serif; font-size: 15px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial;">

If I removed this line, the problem disappeared.
Hope that helps.

v3.23.0 should work properly even if you have invalid HTML. Thanks again for reporting!

https://doc.inkdrop.info/releases#v3-23-0

1 Like