App hangs when caps lock enabled on Sonoma

• bug report: Inkdrop hangs on MacOS Sonoma with caps lock active - 💁🏻‍♂️Support - Inkdrop Forum

Errors output on the main process like so:

Attempting to call a function in a renderer window that has been closed or released.
Function provided here: undefined

No, that was not anything to the bug.

It often hangs when handling onChange event on input

So, React might cause the issue?? I guess inkdrop-keymap is not a culprit.

🤔 It is highly likely an Electron's bug

It doesn't hang while recording a performance profiling of Developer Tools!!

👀 Try upgrading Electron to the latest

• Bump up Electron to 28

Reproduction

Redux causes it?

const Tester = () => {
  const [text, setText] = useState < string > ''
  const dispatch = useDispatch()
  const handleTextChange = (e) => {
    setText(e.target.value)
    dispatch(actions.searchBar.setQuery(e.target.value))
  }
  return (
    <div style={{ margin: 50 }}>
      <input
        type="text"
        className="native-key-bindings"
        value={text}
        onChange={handleTextChange}
      />
    </div>
  )
}

Title input

In EditorHeaderTitleInputBase, it doesn't hung when avoiding calling dispatch.

This code causes the freeze:

dispatch(
  actions.editingNote.update({
    title: value,
  }),
)

But! if EditorLayout is hidden, it doesn't happen.

WindowControlButtons is culprit?!

Using memo solved it 🤯

diff --git a/src/browser/components/window-control-buttons.tsx b/src/browser/components/window-control-buttons.tsx
index 278dd540..7c4d6dfb 100644
--- a/src/browser/components/window-control-buttons.tsx
+++ b/src/browser/components/window-control-buttons.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useState, useEffect } from 'react'
+import React, { useCallback, useState, useEffect, memo } from 'react'
 import './window-control-buttons.less'
 import AppMenuButton from './app-menu-button'
 import getApp from '../utils/get-global-app'

-const WindowControlButtons = () => {
+const WindowControlButtons = memo(() => {
   const app = getApp()
   const [isMaximized, setMaximized] = useState(app.window.isMaximized())
   const handleMinimizeClick = useCallback(() => {
@@ -19,7 +19,6 @@ const WindowControlButtons = () => {

   useEffect(() => {
     const handleMaximized = () => setMaximized(true)
-
     const handleRestored = () => setMaximized(false)

     app.window.on('maximize', handleMaximized)
@@ -52,6 +51,6 @@ const WindowControlButtons = () => {
       </i>
     </div>
   )
-}
+})

 export default WindowControlButtons

app.window.isMaximized() may have a bug, but I don't know.

But it still happens randomely

It is now way less frequent, but it still happens.

The debounced function???

MDEPreview?

🐞 Accessing remote object on key input causes the issue

It can be avoided by using structuredClone! Now it makes sense why WindowControlButtons causes the issue since it accesses a Window remote object.

Searching notes

When searching notes, it also randomly happens.

In @inkdropapp/redux-store/src/utils/notes.ts:

   6   export function loadWithKeyword(
   5   │ searchKeyword: string,
   4   │ queryOptions: FTSQueryOptions
   3   ): ThunkAction<Promise<void>> {
   2   │ return loadNotes(async (dispatch, _getState, getContext) => {
   1   │ │ try {
 403   │ │ │ const { db } = getContext()

Getting a reference of db also causes the hung... So, it is hard to solve at the moment.

Avoid accessing remote objects when editing a note

• Commit: fix(app): avoid using remote objects in useNote

Test it on the user's environment

It looks like it's working fine:

• Inkdrop hangs on MacOS Sonoma with caps lock active - #10 by Alessandro_Baldoni - 💁🏻‍♂️Support - Inkdrop Forum