LinusBorg/portal-vue

MountingPortal & :disabled="true"

tybruffy opened this issue · 2 comments

I feel like MountingPortal should properly account for the disabled state before it passes on data to Portal.

In my circumstance, I'd like to portal to an HTML element outside of my app, which may or may not exist. I have event listeners that will update my store state when the element is created, and I was using that listener to enable/disable the MountingPortal once I know the element exists.

Unfortunately, if the element to mount to doesn't exist when the created hook runs, it throws an error and never gets updated. It seems like this is something disabled should be able to handle, am I doing something wrong?

Is this as simple as extracting the logic that runs in the created function currently to it's own method, and then running it when disabled changes/if disabled is not true on creation? Call that method something like register and then:

created() {
  if (!this.disabled) {
    this.register();
  }
}

and then adding a watcher for the disabled method?

watch: {
  disabled(newValue: boolean, oldValue: boolean) {
    if (newValue) {
      this.register();
    }
  },
}

Makes sense, but realistically I won't work on this for now. I hardly have time to maintain the lib and still need to come up with a Vue 3 version for it soon.

If someone want to provide a tested PR I'm willing to give it a go though.