Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensuring input modals stay in focus and able to fire change events #326

Closed
fabiospampinato opened this issue Feb 3, 2023 · 2 comments
Closed
Assignees
Milestone

Comments

@fabiospampinato
Copy link

  • Version: 3.0.0
  • macOS: 12.5.1

With the following code I see two problems:

  • After about 8 seconds since the modal is opened it loses the focus automatically, even if I don't do anything.
  • After it loses the focus, if I manually re-focus it, then textDidChange events are still no longer fired.
  const APPS = ['1Password', 'Xcode'];

  function fuzzyMatch(needle, haystack) {
    if(needle === "" || haystack === "") return true;
    needle = needle.toLowerCase().replace(/ /g, "");
    haystack = haystack.toLowerCase();
    // All characters in needle must be present in haystack
    var j = 0; // haystack position
    for(var i = 0; i < needle.length; i++) {
        // Go down the haystack until we find the current needle character
        while(needle[i] !== haystack[j]) {
            j++;
            // If we reached the end of the haystack, then this is not a match
            if(j === haystack.length) {
                return false;
            }
        }
        // Here, needle character is same as haystack character
        //console.log(needle + ":" + i + " === " + haystack + ":" + j);
    }
    // At this point, we have matched every single letter in the needle without returning false
    return true;
  }

  const modal = Modal.build ({
    origin: {
      x: 300,
      y: 300
    },
    weight: 25,
    animationDuration: .2,
    appearance: 'dark',
    text: 'Search...',
    isInput: true,
    icon: App.get ( 'Phoenix' ).icon (),
    textDidChange ( text ) {
      // appendFile ( '/Users/fabio/Desktop/output.txt', `[${text}]\n` );
      const app = APPS.find ( app => fuzzyMatch ( text, app ) );
      // appendFile ( '/Users/fabio/Desktop/output.txt', `${text} - ${app}\n` );
    }
  });

  modal.show ();
@fabiospampinato
Copy link
Author

fabiospampinato commented Feb 3, 2023

Somehow one of these input modals survived restarting Phoenix for me, so I can't close it anymore 🤔


Edit: it seems to survive a reload if Phoenix reloads itself, but it seems to close itself correctly if I call Phoenix.reload manually myself. Though it doesn't behave consistently, so maybe I'm seeing a pattern that doesn't exist.


Edit: also each time I open a new modal at the same coordinates it opens slightly offset from the point I set, which seems symptomatic of some other, possibly related, bug.

kasper added a commit that referenced this issue Mar 24, 2023
@kasper kasper self-assigned this Mar 24, 2023
@kasper kasper added this to the 4.0.0 milestone Mar 24, 2023
@kasper
Copy link
Owner

kasper commented Mar 24, 2023

@fabiospampinato Hi, thanks for the report! After debugging this looks to me as a memory management issue. I clarified the documentation that you must always keep a reference for the modal to stay active. Otherwise the callback for text changes will not get called once it gets released in the background.

To avoid mistakes, I also changed it so that Modal#show() will return the modal itself for chaining. Finally, there was an issue that the window was not getting closed properly when it got deallocated from the JavaScript context. This should also now be fixed.

@kasper kasper closed this as completed Mar 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants