Hey, does anybody know how to change a state/context if one clicked off an element?

[Newton-Adams]

I have a dropdown block pulling services from a custom post type. Open and closing the dropdown works fine when I click on the element. But I want to change the state when I click off of it or anywhere else off the element on the screen.

// render.php
<div
	data-wp-interactive="services-dropdown"
	<?php echo wp_interactivity_data_wp_context( array( 'isOpen' => false, 'dropDownHeight' => '0px' ) ); ?>
	data-wp-watch="callbacks.dropdownIsOpen"
>
	<div
		class="service-dropdown-selector"
		data-wp-on--click="actions.toggle"
		data-wp-bind--aria-expanded="context.isOpen"
	></div>
</div>

// view.js
import {
	getElement,
	store,
	getContext,
	useState,
	useEffect,
} from '@wordpress/interactivity';

const useEleHeight = () => {
	const [EleHeight, setEleHeight] = useState('');
	useEffect(() => {
		const { ref } = getElement();
		setEleHeight(ref.scrollHeight);
	}, []);
	return EleHeight;
};

store('services-dropdown', {
	actions: {
		toggle: () => {
			const context = getContext();
			context.isOpen = !context.isOpen;
		},
	},
	callbacks: {
		logIsOpen: () => {
			const { isOpen } = getContext();
		},
		serviceList: () => {
			const context = getContext();
			const isOpen = context.isOpen; // Ensure `isOpen` is retrieved correctly
			const isEleHeight = useEleHeight();

			if (isOpen) {
				context.dropDownHeight = `${isEleHeight}px`; // Ensure height is set as a string with 'px'
			} else {
				context.dropDownHeight = '0px';
			}
		},
	},
});

Please and thanks in advance

[Newton-Adams]

Nevermind... I found this works

// render.php
<div data-wp-on-document--click="callbacks.logClick"></div>

// view.js
store('services-dropdown', {
  actions: {
    toggle: () => {
      const context = getContext();
      context.isOpen = !context.isOpen;
    },
  },
  callbacks: {
    logIsOpen: () => {
      const { isOpen } = getContext();
    },
    serviceList: () => {
      const context = getContext();
      const isOpen = context.isOpen; // Ensure `isOpen` is retrieved correctly
      const isEleHeight = useEleHeight();

      if (isOpen) {
        context.dropDownHeight = `${isEleHeight}px`; // Ensure height is set as a string with 'px'
      } else {
        context.dropDownHeight = '0px';
      }
    },
    logClick(event) {
      if (!event.target.closest('.wp-block-create-block-services-dropdown')) {
        const context = getContext();
        context.isOpen = false;
      }
    },
  },
});

[luisherranz]

Yeah, using data-wp-on-document is a good way to achieve it 🙂

May I ask what problem you had here?

const isOpen = context.isOpen; // Ensure `isOpen` is retrieved correctly

[Newton-Adams]

Hey, no problem. Just used it for the conditional logic. Thanks for your reply