I am using react select search as a part of the selection input in one of my forms.I need to obtain the on change text from the search provided is there any way to achieve this.
my components with their props are:
<SelectSearch options={selectSearchOptionsDepartment}
search={true}
name='department'
placeholder='Department'
value={updatedRoleDep?updatedRoleDep:deptValues}
onChange={(e,option)=>{onChangeSelectSearchDepartment(e)
HandelChange(option)
}}
emptyMessage={preCompile.newDepartmentAdd}
/>
Related
I have enterprise edition of react-admin. I am using Search component from ra-search. Now I would like to change placeholder text in search text input. How can I achieve this?
You can override 'ra.action.search' in your localisation files, but it will change the default placeholder for all 'SearchInput's in your application.
Otherwise, you must copy/paste their code from /node_modules/#react-admin/ra-search/src/Search.tsx in a file of your own, then change the "SearchInput" in the return by adding the "placeholder" props of your choice.
<SearchInput
...
placeholder={translate('my.custom.placeholder.localization.key')}
/>
In my React Bootstrap Typeahead component, the user can press Tab to select the currently matched option. How can I accept Enter as well?
You can use the selectHintOnEnter prop to achieve this behavior:
<Typeahead
options={[ ... ]}
selectHintOnEnter
/>
Enabling this prop will allow users to select the hint by pressing Enter as well as Tab. Here's a live example.
I'm testing my React application using Selenium IDE and want to add an unique ID ("data-testid" for example) to all elements so I'd be able to select them easily.
So far I encountered libraries which accomplish that by adding some code (react-html-id for example), but I'm looking for a solution which will add these data attribute automatically on build time.
For Example:
Given a component
<SomeComponent /> // returns <span>Hello World<span>
When building the React application, it should be resulted with:
<span data-testid="123">Hello World</span>
I am trying to make "required" a TextField in select mode.
I tried to add required prop like in this snippet, but this does not block the submit event if I haven't select anything. Although it adds the '*' to the label.
Please check this sandbox
<TextField
id="select-currency"
select
label="Select"
value={this.state.currency}
onChange={this.handleChange("currency")}
required
>
{currencies.map(option => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
UPDATE: (Clarification really)
I am talking about html5 validation. In the sandbox example there are Select and Text fields, setting the text field as required will block the submit event and displays a native html5 error saying "this field is required", this is not the case if the field is "select".
Material Ui provides another component Native Select to handle this kind of native validation.
Please check this example
It was recently implemented in material ui. If you upgrade #material-ui/core to version 4.11.0 it will work https://github.com/mui-org/material-ui/issues/20402
It's not field responsibility to control form behavoiur. It's parent-child relation and top-down data passing.
Form (component) provides current value to component (validity information, change handler) to field component. Field displays content using styles and elements depending on props (* when required, error border etc) but it's form' role to decide about value/validity/submiting.
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.