I am using Select component from Antd 3.x library with mode="multiple" and other options as shown in codesandbox link below. The Search is not disabled even when setting showSearch={false}
Now, I can't upgrade to Antd 4.x. The issue is when I use Axe Accessibility tool on my web app, it complains about an extra "Input" in my Select, which doesn't have aria-label set. If I manually set it in chrome console, all is fine
Is there a way to work around this situation either by removing search field(not sure how?) or someway to set the aria-lable of the input to something like aria-lable="search"?
codesandbox link
TIA
You can use filterOption to control your option list.
In my case, my options's value is a list of accounts, which will change every times I input keyword. Option's value is account.id and label is account.name.
filterOption, set it () => true (that means, all of options are OK).
onSearch, I call API to request new list of accounts, which meet with my keyword.
But in your case, I think, set filterOption to () => true will solve your problem.
Hope you solve with my solution!
Related
What I have
I'm using the FormController to create inputs. A specific input will be frequently updated by Javascript for internal purposes and I want it hidden. In this case, I can't use type="hidden", instead it needs to be type="text" so that it won't be checked by the form tampering prevention when submitted.
What I tried
Adding 'hidden' => true to $this->Form->create() options works if the whole form needs to be hidden. That exact attribute doesn't seem to be working for individual inputs though, created using both $this->Form->input() and $this->Form->control()
For a specific input, first thing that comes to mind is adding 'style' => 'display:none' to its options, but that does not seem like a clean CakePHP-way solution
I think I've seen someone mention a way to do exactly that here. I think it was an attribute you'd add to the options. I searched around my answers and comments, using both this site and Google, but found nothing.
Please advise!
You can create a hidden input and make it exempt from form security in case required, either by unlocking the field via the unlockField() method:
$this->Form->unlockField('field_name');
echo $this->Form->hidden('field_name');
or by passing false or 'skip' for the secure option:
echo $this->Form->hidden('field_name', ['secure' => false]);
echo $this->Form->hidden('field_name', [
'secure' => \Cake\View\Helper\FormHelper::SECURE_SKIP
]);
See also
Cookbook > Views > Helpers > Form > Working with SecurityComponent > unlockField()
I am creating a cascading kind of layout where I have two Select components for Roles and Users, the functionality I want is working fantastic except a use case where upon clearing/removing a role or clearing all roles, the Users Select component is not clearing the MultiValue items however the dataset is being cleared properly.
Please guide me as to how to achieve the said functionality, may be I am missing something or probably some kind of issue.
Here's a code snippet - https://codesandbox.io/s/l98n1o6lq7
You can control it via value attribute on Select in react-select. Following is the code you can try and manipulate accordingly -
<Select
closeMenuOnSelect={false}
isMulti
options={showUsers}
value={showUsers}
hideSelectedOptions={true}
backspaceRemovesValue={true}
/>
Working Demo - https://codesandbox.io/s/9z02ql079p
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 am trying to Automate flipkart website in which i am trying to change address but "add new adress" is not getting clicked i have attached the snapshot
my code is like driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).click();
please give the appropriate help
I doesn't look that you are clicking active element, the xpath is //*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span not correct it clicks on some span.
Use Firepath https://addons.mozilla.org/en-US/firefox/addon/firepath/ to get the xpath.
To ensure that button is clickable Use isDisplayed() and isEnabled() method before clicking on "Add New Address" button, this method return boolean value.
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isDisplayed();
driver.findElement(By.xpath("//*[#id='ng-app']/div/div[2]/ul/li[2]/div/div[2]/div[2]/div[2]/a/span")).isEnabled();
Also you can verify that element is exist on page or not using below code
if(driver.findElements(byVal).size()!=0){
// Element is present.
}
hope it may helpful to identify cause of issue, why its not clickable.
First and foremost, Use a customized Xpath instead of the one you are using which is extracted directly from the browser. If no customized Xpath can be constructed then try a customized Css or any other locator if possible.
Try to go through the following attempts in order (I hope you can grasp why this is):
1- If .click() still doesn’t work, then keep on changing the values of the attributes you are using to construct your customized xpath, cssSelector, or locator.
2- Use the Actions class.
3- Use JavaScript executioner
4- instead of click(), try using any of: .sendKeys(“\n”). Or .sendKeys(keys.ENTER) or .sendKeys(keys.RETURN)
I'm using the Ext.form.field.Tag component. I have configured
createNewOnEnter:true,
createNewOnBlur:true,
forceSelection:true
but if I type in a value that's not the in the dropdown list/store records and tab-out or click enter the value gets selected. I want the value to be selected on enter/blur ONLY if it exists in the dropdown. But when createNewOnEnter and createNewOnBlur are set to true, forceSelection becomes false. I verified this by setting a debugger in the "change" event handler.
I dont have a fiddle but you can copy paste the above config into the live editor in the API Docs here
thanks
There are some configurations that are incompatible with each other, and ExtJS does not provide for all thinkable configurations of components (although they try, but then, Tagfield is quite new). This is the relevant part of the form/field/Tag.js file that explains your experience:
if (me.createNewOnEnter || me.createNewOnBlur) {
me.forceSelection = false;
}
To get what you want, you would have to override some parts of the tag field definition to suit your needs. You should look into overriding the assertValue and the onKeyUp functions.