0

Hello Greetings for the day I am trying to Hide the dropdown after choosing the desired value from the dropdown The catch here is that designers have used the "mat-select"(Under div tag) rather than the "select" tag. Solutions that I tried. 1 Clicking on the scroll button at the side of the dropdown 2 Just clicking on a blank screen(Not feasible as it might unselect the value) https://material.angular.io/components/select/overview#multiple-selectionel Note when the "mat-select" dropdown is open it hides the focus from other elements.

1 Answers1

0

Why to simply selecting the dropdown options by their id?
There are 3 options in the upper dropdown: Steak, Pizza, Tacos.
Their locators are accordingly:

mat-option[id=mat-option-0]
mat-option[id=mat-option-1]
mat-option[id=mat-option-2]

Slicking on the option selects it and the dropdown get closed.

Prophet
  • 32,350
  • 22
  • 54
  • 79
  • Yes "mat- select" items should automatically get closed after choosing the value but in my case, The dropdown contains multiple checkboxes. like we can choose Pizza and Tacos at same time. So in that case it is not automatically closing. – Vipul Sharma May 27 '21 at 06:18
  • I can't share that with anyone as that is still under development. however, I found the way thanks for your help. – Vipul Sharma May 27 '21 at 07:29
  • If that helped can you accept the answer? – Prophet May 27 '21 at 07:32
  • OK, but you understand, I could not guess that from the link you provided... – Prophet May 27 '21 at 07:35
  • yes i have updated the link from "https://material.angular.io/components/select/overview" to its sub category "https://material.angular.io/components/select/overview#multiple-selectionel" – Vipul Sharma May 27 '21 at 07:45
  • I see. Actually, to close that dwrodown you can simply click on some element out of the dropdown :) I will update the answer shrotly – Prophet May 27 '21 at 07:47
  • I tried it. It will not work as "mat-selects" will not allow to focus on any other element until the dropdown is open. So You will not able to click on the White area. – Vipul Sharma May 27 '21 at 07:52
  • You can. In this case you can use JavaScript click – Prophet May 27 '21 at 07:54
  • OK, I just want to understand. Did you try JavaScript click? For example try JavaScript clicking on element located by this CSS locator: `[class='docs-navbar-header']` – Prophet May 27 '21 at 08:04
  • Yes, I did but I clicked on a specific pixel (By scrolling and clicking on that pixel), and that didn't work. – Vipul Sharma May 27 '21 at 08:14
  • I'm not sure we understand each other. I suggested clicking `[class='docs-navbar-header']` element with JS, not scrolling to any pixel and lick on it – Prophet May 27 '21 at 09:10
  • yes, I already did but clicking on "[class='docs-navbar-header']" didn't work as it hides all the background elements including the top toolbar. – Vipul Sharma May 27 '21 at 10:22
  • I wrote you to click it with JavaScript, not with driver. element = driver.find_element_by_css-selector("[class='docs-navbar-header']") driver.execute_script("arguments[0].click();", element) – Prophet May 27 '21 at 10:28
  • https://stackoverflow.com/questions/34562061/webdriver-click-vs-javascript-click – Prophet May 27 '21 at 10:28
  • yes, I already did it with javascript executer but it didnt work on the JDK-14.0.2 and selenium 3 (3.141.59). Did it work for you? – Vipul Sharma May 27 '21 at 10:37
  • Yes, it works correctly for me. I use Java 11, but I don't think it should be the Java version issue. Strange... – Prophet May 27 '21 at 10:43
  • JavascriptExecutor js = (JavascriptExecutor)driver; WebElement toolbar =driver.findElement(By.xpath("//div[@class='flex-spacer']")); js.executeScript("arguments[0].click();", toolbar); I don't know why it is not working for me. Appreciate your help :) – Vipul Sharma May 27 '21 at 11:26
  • What are you trying to tell me now? Is that worked? – Prophet May 27 '21 at 11:27
  • 1
    No, it didn't work on my machine. just appreciating your effort and time. – Vipul Sharma May 27 '21 at 11:31