Can Popover be used as a controlled component?

[bstro]

I'm looking at the docs and I don't see any open or isOpen prop in order to control the visibility of the popover from a parent. This is really useful for controlling popovers from things other than the trigger. Is this possible with the zag's popover?

my goal is to get the popover to open when the Editable input has focus, so my thought was to drive the popover as a controlled component.

[anubra266]

@bstro use open here

[bstro]

Thanks for the speedy reply! I looked at the link you provided about transient updates, and tried the following just to see if it worked (am aware that I'll need to memoize the actual value i end up using):

const [popoverState, popoverSend] = useMachine(
    popover.machine({
      id: createUniqueId(),
    }),
    { context: { open: true } }
  );

However, the types don't recognize any open properties on the context object. Is there something I'm missing?

[bstro]

I discovered { state: "open" } for the second argument for useMachine but it doesn't seem to have any effect.

Here's a stackblitz. I'm trying to get the popover to open when the Editable input has focus.

[bstro]

I'm wondering if I was actually trying to solve the problem at the wrong level. I found that this approach allowed me to compose the machines together with the behavior I needed:

  const popoverTriggerId = createUniqueId();

  const [editableState, editableSend] = useMachine(
    editable.machine({
      id: createUniqueId(),
      ids: { input: popoverTriggerId },
      value: props.value,
      onChange: props.onChange,
      onEdit() {
        popoverApi().open();
      },
      onCancel() {
        popoverApi().close();
      },
    })
  );

  const editableApi = m(() =>
    editable.connect(editableState, editableSend, normalizeProps)
  );

  const [popoverState, popoverSend] = useMachine(
    popover.machine({
      id: createUniqueId(),
      ids: { trigger: popoverTriggerId },
    })

I don't understand why, but both the editable and popover machines must be initialized with ids: { input: popoverTriggerId } in the configuration object for this to work.

[anubra266]

@bstro You're doing it the right way now, I just realised we aren't using an open key in the context, so my first solution won't work.
But you shouldn't need the ids key to make it work