How to create an Autocomplete suggestions with a button inside, and for the click not to propagate into the autocomplete? - vuejs2

I have a regular element io input field fetching some results that I would like to add to an array straight from the autocomplete-suggestions. I've added a button to the suggestions but the select event in the autocomplete keeps getting triggered, is there anyway around this ?

Related

How to unfocus from all inputs/elements in Selenium without tabbing out

I have a form where I fill in textboxes through selenium (java). Some of the textboxes dynamically generate extra content when you click on them and remove the content when you focus on something else. This is a problem when I automate because if I am focused on a text box and try to click on something else, when the page removes the content it doesn't register my click and I need to click again. This leads to flakey behaviour since I need to now consider whether I need to click or double click a button depending on what element I was focused on before.
I can't send a tab key to the text box because sometimes it will tab into another textbox that has the same dynamic generation behaviour, leading to the same scenario as before.
I tried clicking the page element but it also doesn't seem to work. I also tried clicking the root div. It just doesn't seem to register my click (I also tried jsclicks)
What I would like to do is have a general way to unfocus a text box after I fill it.
Thanks!

VueJs - How can i call an event when the cursor focus out in the combobox field

I have a combobox field in the screen and i need to call an event when i click on save button after typing a new text in this combobox field which is not currently available in the dropdown list.
My seniors told me to use focusout event to get this, but i don't know how to get this.
I am using combobov.vue to show dropdown
Please help me out.
I am able to fix issue by using #blur. Thanks everyone for the comments, especially Boussadjra Brahim

How to Handle React setState() when dealing with input fields?

I have 3 text boxes.
I have 1 dropdown menu.
When the app starts/page loads, the text boxes are empty and the dropdown is populated with various products.
When I select an item from the dropdown list I load the object into the text fields for editing.
When using properties (this.props), the data loads into the text boxes correctly but I can't make edits to the text because that should be done using state instead.
But, if I use state (this.state), the component never stays in sync. If I select Item 1 from the dropdown it gets loaded into the state but does not render onto the screen until I choose another Item from the dropdown list.
So when I pick Item 2 it then loads Item 1 into the text boxes.
Quote from the React docs.
"setState() does not immediately mutate this.state but creates a pending state transition"
How the heck do you guys deal with this? I feel like I've tried it all.
You need to keep the state in the parent component. The parent would be parent for all those text boxes and to the dropdown menu. From there, you just need to pass callback functions as props to the text boxes and to the dropdown component. In that callback function, you should give the selected dropdown menu item as parameter. And when the function is called, you need to update the content of the text boxes. I think you can do this by keeping state for the three text boxes, that what text is currently displayed. Initially their state would be undefined, so they would show empty. In the state you could track the index and the value.
After that, you need to also pass callback functions to the textboxes. Those callback functions would then track and update the content of the dropdown menu items as you edit the fields. When you edit, you will call the callback, which should update the state, and also render the dropdown menu again with the new content.

How can I give focus to WinJS.UI.settingsFlyout after animation?

I'm invoking a WinJS.UI.settingsFlyout element via Javascript using WinJS. Inside the HTML element of the settingsFlyout, I have a text input field that I would like to receive focus after the animation of the flyout occurs. I've tried to use jQuery's .focus() method, but it does not work because I do not think the flyout is focused after it completes its animation. I have to click twice on the input field to begin typing. I click once to get the flyout in focus, and then click another time to get the field in focus. Quite annoying. Is there a way to implement auto focusing of input fields within a WinJS.UI.settingsFlyout?
Have you tried?
settingsFlyout.addEventListener("aftershow", function(){
$('#inputId').focus();
});

Need to change focus to another text box before buttons are activated

I am entering data into text fields in a browser via "type" command. In order for the Save and Cancel buttons to be activated (not grayed out), I need to click in another text field to change focus. This works manually, but I can't seem to figure out how to do it programmatically. I have tried click, clickAt, doubleClick, mouseOver/click/mouseOUt, mouseDown/mouseUp, focus, fireEvent ... all without luck. Thanks for any suggestions!
Does tabbing out of the input field enable the buttons? If so, maybe you can just do:
WebElement element = driver.findElement(By.id("your_input_field"));
element.sendKeys(Keys.TAB);