I have an autocomplete with options - which is an array of objects (Movies).
My goal is when user types, e.g., he types "in" and then hits the Enter, that it selects first entry from the rendered list. In this case would be - 'Inception'. See screenshot.
I found work around to select first entry by selecting first element from the rendered list. But I use createFilterOptions which makes it impossible.
Any suggestions?
https://codesandbox.io/s/material-demo-forked-cwcql?file=/demo.js
Add the autoHighlight={true} prop to the <Autocomplete> component.
https://material-ui.com/api/autocomplete/#main-content
https://codesandbox.io/s/material-demo-forked-dh9b3?file=/demo.js
Related
With React Bootstrap Typeahead, if there is no record found and display "no matches found", is it possible I can add that value to the selected props when I click enter?
You can use the allowNew prop to add arbitrary items to the selections:
<Typeahead
allowNew
options={[...]}
selected={[...]}
/>
When users enter a string that isn't found in the set of options, they'll be presented with a menu option giving them the ability to add the text they've entered as a selection:
Here's a working example: https://codesandbox.io/s/rbt-custom-selections-18piu
Use the props like
emptyLabel="YOUR_CUSTOM_TEXT"
I'm interested in building a Tag input feature like Stack Overflow where the feature set includes:
Input field which has a autocomplete feature (takes user input, fetches results from the server and displays those results to the user for easy selection.
Input field contains 1 or more selected items as tags.
Suggestions outside of the input which when clicked have the results added to the input field.
Screenshots from Stack Overflow:
I'm using Semantic-UI-React and notice there is a search component which could work: https://react.semantic-ui.com/modules/search
It does not appear that this Semantic-UI-React search component allows for adding more than one result or adding results via a method outside of the input. Am I missing something?
Should I use Semantic UI for this feature or will I need to build this entirely from scratch in my React app?
It's not properly highlighted in the react semantic-ui dropdown documentation but the allowAdditions field will enable tagging capabilities:
<Dropdown search selection multiple allowAdditions />
You need to add the onAddItem prop to update the options list. In here, I did this:
<Dropdown
placeholder='Select Friend'
fluid
search
selection
multiple
allowAdditions
onAddItem={(event, data) => friendOptions.push({key: data.value, text: data.value, value: data.value})}
options={friendOptions}
/>
And now you can add items to the dropdown list.
I click on the drop down list button.Then it is coming like the mentioned picture.
so I have to click on Item1. after that I have to select Xyz. so which way should I follow?
You can do it in many ways.
By using getFirstSelectedOption(), you can select your first element, and by using selectByVisibleText("Xyz") selenium will click on Xyz, but the thing is your DOM must contain select attribute for dropdown. There are many other ways to create dropdown option in HTML.
Select dropdown = new Select(driver.findElement(By.xpath("//img[#id='ext-gen7']")));
dropdown.getFirstSelectedOption();
dropdown.selectByVisibleText("Xyz");
Now, if your DOM is not using select for creating dropdown, you can also use the .click() method directly. Find the elements and click on that location directly using .click(). This will work many times.
List<WebElement> examples = driver.findElements(By.xpath("YOUR XPATH"));
for (WebElement option: examples)
{
if(option.getText().contains("Item2") )
option.click();
else{
syso("I do not want to click")
}
}
Make sure the above Xpath should return all your values of dropdown.
i need to select the first element from an autocomplete search box ,
when autocomplete shows its hover other element,so other element not clickable by protractor ,
solution
element.all(by.css('[ng-model="address"]')).get(0) is not work for me but work in another computer ,
same script work in another computer ,
i checked protractor version , selenium version
i also try element.all(by.css('[ng-model="address"]')).first() ;
its also not work for me ,
do you have any idea how cant i get first element ?.
thanks
you can send enter key
protractor.Key.ENTER
yourelement.sendKeys('your text to send ', protractor.Key.ENTER);
The Autocomplete List is only visible if a curser is over the element.
this.selectFirstElement = function(element){
browser.sleep(3500);
browser.driver.actions().mouseMove(element);
element.sendKeys(protractor.Key.ARROW_DOWN);
element.sendKeys(protractor.Key.TAB);
};
Try adding a short delay (say 500ms) and then do click. Sometimes the rendering of autocomplete misses the first item.
I am using UI bootstrap typeahead and it selects the first term by default. Here the issue.But since I am limiting the suggestions in the list, so all suggestions will not be in the list. Now if the user search for any term then automatically first term will be searched as its selected by default instead of the term entered. I want to search the entered term by default. Simply I want to remove the auto select feature.
To do this I found a hack on the github issue page to append the $viewvalue to the dropdown list:
typeahead="state for state in (states.length ? [$viewValue].concat(states) : [])"
Plnker
Edit[working]:
And according to my need I modified it as:
typeahead="student for student in ((students.concat({name:$viewValue})) |filter:{name:$viewValue} | limitTo:8)"
Any other suggestions to remove the default auto select?
Add attribute typeahead-focus-first=false
Ref:
https://www.bountysource.com/issues/5720762-typeahead-focus-first-false-option-to-prevent-first-match-from-being-focused