Why a menu item is collapsing before it's child item is clicked in iOS only and how to prevent it ?

[PrasadNutalapati]

I am working on mobileweb Selenium-Appium-Java test script development. The scenario is like this.

• User clicks on 'Shop' hamburger menu
• It opens 'Conduit' and other menu items
• User clicks on 'Conduit' item, which opens the submenu items 'Steel Conduit', 'Aluminium Conduit' , plus many other items.
• In iOS alone, while Android testing is running as expected, that after 'Shop' is clicked and 'Conduit' item has showed up, and even before 'Conduit' is clicked to see the 'Steel Conduit' item, the 'Conduit' is collapsing in to it's parent 'Shop'.
• This is causing the WebElement for 'Steel Conduit' is failing to be located, rightfully so as it has been under 'Conduit' which has collapsed in to 'Shop' already.
• I am using the following coding:--

				//'Shop' menu item under hamburger menu in the mobile
waitingDriver.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("(//span[@class='toggle'])[2]"))).click();
				doWait(3000);
		        // category item under 'Shop' menu item  
WebElement categoryElm = waitingDriver.until(ExpectedConditions.elementToBeClickable(By.xpath(String.format("//a[contains(text(),'%s')]",category))));
				doWait(3000);// sleep method

System.out.println("category Text="+categoryElm.getText()); // outputs Conduit
				elementActionsTap(categoryElm);
				if(null != sub_category) { 
					// sub-category under category menu item
WebElement sub_categoryElm = waitingDriver.until(ExpectedConditions.elementToBeClickable(By.xpath(String.format("//a[normalize-space()='%s']",sub_category))));
System.out.println("sub_categoryElm Text="+sub_categoryElm.getText()); // supposedly output 'Steel Conduit'
					elementActionsTap(sub_categoryElm);
				}	// end 'if'	

/**
* The Tap method using W3C Actions class.
*/

public void elementActionsTap(WebElement elm) {
	int elmCenterX = elm.getLocation().getX() + elm.getSize().getWidth()/2;
	int elmCenterY = elm.getLocation().getY() + elm.getSize().getHeight()/2;
	PointerInput finger = new PointerInput(PointerInput.Kind.TOUCH, "indexFinger");
	Sequence tap = new Sequence(finger, 1);
	tap.addAction(finger.createPointerMove(Duration.ofMillis(0), PointerInput.Origin.viewport(), elmCenterX, elmCenterY));
	tap.addAction(finger.createPointerDown(PointerInput.MouseButton.LEFT.asArg()));
	tap.addAction(finger.createPointerUp(PointerInput.MouseButton.LEFT.asArg()));
	driver.perform(List.of(tap));
}		

[KazuCocoa]

It looks like the app's implementation could affect the behavior. https://github.com/appium/appium-xcuitest-driver/blob/master/docs/guides/input-events.md is the implementation guide in Appium/WDA to emulate the click action.
If the OS or the app's implementation possibly handled such touch events for multiple layers etc, the behavior maybe occur.

Checking the system log, page source or debugging the app's touch implementation would give more info I guess.