Untitled

remove all script content from code also remove onclick function that is placed in dropdown-header adn add these functionality in javascript code to work properly
else {

					$shareClass = __( 'Share Class', 'blackstone' );

					$tabs = '<div class="dropdown-container">';
						$tabs .= '<div class="dropdown-header" onclick="toggleDropdown()">';
							$tabs .= '<div class="share">'. $shareClass .'</div>';
							$tabs .= '<div class="dropdown-button"></div>';
						$tabs .= '</div>';

						$has_default_states = ! empty(
							array_filter(	
								array_map(
									function( $inner_block ) {
										return ! empty( $inner_block['attrs']['states'] );
									},
									$block['innerBlocks']
								)
							)
						);

						if ( is_array( $block['innerBlocks'] ) ) {
							$groupsPerforamcenBars = array();

							foreach( $block['innerBlocks'] as $inner_block ) {
								$groupTitle = trim( $inner_block['attrs']['groupTitle'] );
								if ( ! isset( $groupsPerforamcenBars[ $groupTitle ] ) ) {
									$groupsPerforamcenBars[ $groupTitle ] = array();
								}

								$groupsPerforamcenBars[ $groupTitle ][] = $inner_block;
							}

							$tabs .= '<div class="dropdown-options" id="dropdown-options">';

									foreach ( $groupsPerforamcenBars as $groupTitle => $group_tabs ) {
										$tabs .= '<div class="dropdown-group">';
											$tabs .= '<div class="dropdown-group-title">'. $groupTitle .'</div>';
											foreach ( $group_tabs as $inner_block ) {
												$title    = $inner_block['attrs']['title'];
												$states   = ! empty( $inner_block['attrs']['states'] ) ? $inner_block['attrs']['states'] : [];
												$id       = sanitize_title_with_dashes( $title );
												$groupTitles = $inner_block['attrs']['groupTitle'] ? explode("\n", $inner_block['attrs']['groupTitle']) : [];
												$gtm_atts = setup_multiple_gtm_attributes(array("category"=>"Page Engagement", "action"=>"Filter Click", "label"=>'Performance Filter | ' . esc_attr( $title ), "component_type"=>"Chart tabs", "click_text"=>esc_attr( $title ), "tag_name"=>"Page Engagement Click"), false);
												$tabs .= '<div class="dropdown-option" ' . $gtm_atts . ' value="' . esc_attr( $id ) . '" data-default-in-states="' . esc_attr( implode( ' ', $states ) ) . '">' . esc_html( $title ) . '</div>';
											}
										$tabs .= '</div>';
									}
							$tabs .= '</div>';
						}
					$tabs .= '</div>';


					$tabs .='<script>
							document.addEventListener("DOMContentLoaded", function() {
								// Set the initial value of the dropdown button to the first option
								var firstOption = document.querySelector(".dropdown-option");
								var dropdownButton = document.querySelector(".dropdown-button");
								if (firstOption) {
									dropdownButton.innerText = firstOption.innerText;
								}
							});
							
							function toggleDropdown() {
								var dropdownOptions = document.getElementById("dropdown-options");
								var dropdownContainer = document.querySelector(".dropdown-container");
								
								dropdownOptions.classList.toggle("show");
								dropdownContainer.classList.toggle("selected");
							}


						</script>';

				}


in below javascript code add script that is used in php to work properly and remove that script from there
import { assignEventAction } from '../utils/analytics';
import { getSelectedStateFromLocalStorage } from '../utils/local-storage';

/**
 * Tabs
 */
export default class BlackstonePerformanceData {
	/**
	 * Component Constructor.
	 */
	constructor() {
		this.blocks = Array.from( document.querySelectorAll( '.performance-data' ) );
		this.selectedState = getSelectedStateFromLocalStorage();

		// Bail if tabs block is not on page
		if ( ! this.blocks.length ) {
			return;
		}

		this.blocks.forEach( block => this.initBlock( block ) );
	}

	/**
	 * Initialize the block.
	 */
	initBlock( block ) {
		const select = block.querySelector( '.performance-data__select' );
		const dropdownHeader = block.querySelector( '.dropdown-header' );
		const dropdownButton = block.querySelector( '.dropdown-button' );
		const dropdownOptions = Array.from( block.querySelectorAll( '.dropdown-option' ) );
		const windowhashdata = window.location.hash ? window.location.hash : '';

		if ( select ) {
			const options = Array.from( select.querySelectorAll( 'option' ) );
			select.addEventListener( 'change', ( e ) => this.selectTab( e, block ) );

			document.addEventListener( 'setGatingState', () => {
				this.selectedState = getSelectedStateFromLocalStorage();
				this.updateTabs( select, options, windowhashdata );
			} );

			this.updateTabs( select, options );
			this.selectTabOnload( block, windowhashdata );

			block.dataset.initiallyHidden = false;

			if ( block.querySelector( '.is-sticky' ) ) {
				this.positionSelectDropdown( block );
			}
		}else {
			if ( dropdownHeader ) {
				dropdownHeader.addEventListener( 'click', ( e ) => this.toggleDropdown( e, block ) );
			}

			if ( dropdownButton ) {
				dropdownButton.addEventListener( 'click', () => this.toggleDropdown( block ) );
			}

			if ( 0 < dropdownOptions.length ) {
				dropdownOptions.forEach( option => {
					option.addEventListener( 'click', ( e ) => this.selectDropdownOption( e, block ) );
				} );
			}

			document.addEventListener( 'click', ( event ) => {
			
				if ( !event.target.closest( '.dropdown-container' ) ) {
					this.closeDropdown( block );
				}
			} );

			block.dataset.initiallyHidden = false;
			
			this.updateTabsForDropdown( block, windowhashdata );
			this.selectTabOnloadForDropdown( block, windowhashdata );

			window.addEventListener( 'scroll', () => this.handleScroll( block ) );
		}
	}

	toggleDropdown( block ) {
		e.stopPropagation();
		const dropdownOptions = block.querySelector( '.dropdown-options' );
		const dropdownContainer = block.querySelector( '.dropdown-container' );
		
		dropdownOptions.classList.toggle( 'show' );
		dropdownContainer.classList.toggle( 'selected' );
	}

	closeDropdown( block ) {
		const dropdownOptions = block.querySelector( '.dropdown-options' );
		const dropdownContainer = block.querySelector( '.dropdown-container' );
		
		dropdownOptions.classList.remove( 'show' );
		dropdownContainer.classList.remove( 'selected' );
	}
	
	selectDropdownOption( e, block ) {
		e.stopPropagation();
		const selected = e.target.getAttribute( 'value' );
		const dropdownButton = block.querySelector( '.dropdown-button' );
		const target = block.querySelector( `.performance-data-${selected}` );
		const items = Array.from( block.querySelectorAll( '.performance-data__item' ) );

		if ( dropdownButton ) {
			dropdownButton.innerText = e.target.innerText;
		}

		items.forEach( item => item.setAttribute( 'aria-selected', false ) );

		if ( target ) {
			target.setAttribute( 'aria-selected', true );
		}

		this.closeDropdown( block );

		assignEventAction( e );
	}

	/**
	 * Update the tabs (for state change);
	 */
	updateTabs( select, options, windowhashdata ) {
		let defaultOption = null;

		if ( this.selectedState ) {
			const defaultOptions = options.filter( option => {
				const defaultInStates = option.dataset.defaultInStates?.split( ' ' );
				return defaultInStates.includes( this.selectedState );
			} ); 
			
			if ( defaultOptions.length && ! windowhashdata ) {
				[defaultOption] = defaultOptions;

				select.value = defaultOption.value;
				const changeEvent = new Event( 'change' );
				select.dispatchEvent( changeEvent );
			}
		}
	}

	updateTabsForDropdown( block, windowhashdata ) {
		if ( this.selectedState ) {
			const defaultOptions = Array.from( block.querySelectorAll( '.dropdown-option' ) ).filter( option => {
				const defaultInStates = option.dataset.defaultInStates?.split( ' ' );
				return defaultInStates.includes( this.selectedState );
			} );

			if ( defaultOptions.length && !windowhashdata ) {
				const defaultOption = defaultOptions[0];
				this.selectDropdownOption( { target: defaultOption, stopPropagation: () => {} }, block );
			}
		}
	}

	/**
	 * Select Tab Logic.
	 */
	selectTab( e, block ) {
		const selected = e.target.options[ e.target.selectedIndex ].value;
		const target = block.querySelector( `.performance-data-${ selected }` );
		const items = Array.from( block.querySelectorAll( '.performance-data__item' ) );

		// Unselect selected items.
		items.forEach( item => item.setAttribute( 'aria-selected', false ) );

		// Select target one.
		if ( target ) {
			target.setAttribute( 'aria-selected', true );

			// Remove focus to prevent ipad issue with chart selection.
			e.target.blur();
		}

		/**
		 * Reset the first performance item chart tab to first.
		 * 10up/component-tabs does not provide an api for targetting each instance,
		 * therefore all tabs are updated on the page. `e.isTrusted` ensures it is
		 * an user action and not occuring as a result of `updateTabs` region updates,
		 * which causes onload issues.
		 */
		if ( e.isTrusted ) {
			const firstChartTab = target.querySelector( '.tab-item a[role=tab]' );
			if ( firstChartTab ) {
				firstChartTab.click();
			}
		}

		// Send GTM data
		assignEventAction( e );
	}

	/**
	* Scroll to selected class when hash is present .
	*/
	selectTabOnload(  block, windowhashdata ) {
		if ( windowhashdata ) {
			if ( window.history.scrollRestoration ) {
				window.history.scrollRestoration = 'manual';
			}
			const selecteddata  = windowhashdata.replace( '#', '' ).toLowerCase();
			const targetdata    = block.querySelector( `.performance-data-${ selecteddata }` );
			const itemsdata     = Array.from( block.querySelectorAll( '.performance-data__item' ) );
			const elem          = document.querySelector( '.performance-data' );
			
			const isAnchorAvailable = [...document.querySelector( '.performance-data__select' ).options]
				.filter( x => x.value === selecteddata )[0];
			if ( isAnchorAvailable ) {
				console.log( 'inanch' );
				isAnchorAvailable.setAttribute( 'selected', true );
				//Unselect selected itemsdata.
				itemsdata.forEach( item => item.setAttribute( 'aria-selected', false ) );

				// Select target one.
				if ( targetdata ) {
					targetdata.setAttribute( 'aria-selected', true );
				
				}
				if ( elem ) {
					const yOffset = -100; 
					const y = elem.getBoundingClientRect().top + window.scrollY + yOffset;
					window.scrollTo( {top: y, behavior: 'smooth'} );
					
				}

			} else {
				this.selectTabOnloadForDropdown( block, windowhashdata );
			}
		}
	}

	selectTabOnloadForDropdown( block, windowhashdata ) {
		const selecteddata = windowhashdata.replace( '#', '' ).toLowerCase();
		const targetdata = block.querySelector( `.performance-data-${selecteddata}` );
		const itemsdata = Array.from( block.querySelectorAll( '.performance-data__item' ) );
		const elem = document.querySelector( '.performance-data' );
	
		const isDropdownAnchorAvailable = [...block.querySelectorAll( '.dropdown-option' )]
		  .filter( x => x.getAttribute( 'value' ) === selecteddata )[0];
		if ( isDropdownAnchorAvailable ) {
			console.log( 'indropanch' );
			const dropdownHeaderText = block.querySelector( '.dropdown-header .dropdown-button' );
			
			if ( dropdownHeaderText ) {
				dropdownHeaderText.innerText = isDropdownAnchorAvailable.innerText;
			}

			itemsdata.forEach( item => item.setAttribute( 'aria-selected', false ) );

			if ( targetdata ) {
				targetdata.setAttribute( 'aria-selected', true );
			}
			
			if ( elem ) {
				const yOffset = -100;
				const y = elem.getBoundingClientRect().top + window.scrollY + yOffset;
				window.scrollTo( { top: y, behavior: 'smooth' } );
			}
		}
	}
	
	/**
	 * Just triggers a null change event on select dropdown when the page is scrolled without any change in class selector.
	 * 
	 * @return void
	 */
	positionSelectDropdown( block ){
		const selectElement = block.querySelector( '.performance-data__select' );

		document.addEventListener( 'scroll', () => {
			const isFocused = ( document.activeElement === selectElement );
			if ( isFocused ) {
				selectElement.dispatchEvent( new Event( 'change' ) );
			}
		} );
 	}

	handleScroll( block ) {
		const dropdownOptions = document.getElementById( 'dropdown-options' );
		const dropdownContainer = document.querySelector( '.dropdown-container' );

		if ( dropdownContainer && dropdownContainer.classList.contains( 'selected' ) ) {
			dropdownOptions.classList.remove( 'show' );
			dropdownContainer.classList.remove( 'selected' );
		}
	}
}