I am trying simulate search and select an option from the react-select component version 3.1.1. But it always returning the first item in the list.
Below is my component which is working fine in UI but not for integration testing.
<Select
id="test-dropdown"
inputId="testsInput"
className="select-label-input-margin"
classNamePrefix="select"
name="test-dropdown"
placeholder='test placeholder'
isSearchable={true}
isClearable={true}
options={testsOptions}
value={selectedValue}
onChange={option => console.log(option)}
noOptionsMessage={() => 'No result found'}
/>
To simulate that I am using these piece of code
Here wrapper is the class component that I am mounting.
wrapper.find('Select#test-dropdown').find('input[id="testsInput"]').simulate('change', { target: { value: 'Test 1 title' } }),
// wrapper.find('input[id="testsInput"]').simulate('change', { target: { value: 'Test 1 title' } }),
//If I use this it will select second value in the array
wrapper.find('input[id="testsInput"]').simulate('keyDown', arrowDown),
// wrapper.find('input[id="test-dropdown"]').simulate('keyDown', arrowDown),
// wrapper.find('input[id="test-dropdown"]').simulate('keyDown', arrowDown),
wrapper.find('input[id="testsInput"]').simulate('keyDown', tabButton)
I also looked into this issue from the react-select but no help.
Any idea how we can simulate search and select the option?
Related
I'm facing the issue on the react-select package.
I'm going to pass the id to the every options in the Select component from the react-select component.
My code looks like bellow.
var options = [
{id: 'lease', label: 'Lease', id: 'ownership-details-option-lease'},
{id: 'own', label: 'own', id: 'ownership-details-option-own'}
]
I'm going to add the id to the option in the react-select component.
<Select
name='ownershipstatus'
onChange={(e) => {}
...
}
options={options}
/>
Your 'option' objects cannot have two id keys. Object keys must be unique, or the last defined will overwrite the first.
You have two props, getOptionLabel: (option:Object) => String and getOptionValue: (option:Object) => String that you use to define "this is the displayed value and this is the actual value".
pseudocode:
<Select
getOptionLabel={(option) => option.customLabel}
getOptionValue={(option) => option.id}
value={someValueState}
onChange={({target: {value}}) => setSomeValueState(value)}
{...otherProps}
/>
The value you pass in to your control should equate to the 'value' of an option. Are you trying to set an explicit 'id' on options in your list? Why? Are you attempting to write unit testing? If so, use react-select-event and #testing-library/react. You won't need those id's. If it's something else, give us a valid use case.
This is my Field:
<Field
name="postcode"
label="Postcode"
nonReduxFormInputProps={{ id: 'postcode' }}
component={TextInput}
/>
In my test, I've done this so far and it passes but I think it's wrong because for the name, 'postcode' in the code starts with a lowercase, but in my test it only passes if the name is with a capital 'P'. I also don't know how I would test the label, nonReduxFormInputProps and component.
describe('postcode field', () => {
it('should render a Field component with correct props', () => {
render(<TestForm />);
expect(screen.getByRole('textbox', { name: 'Postcode' })).toBeInTheDocument();
The { name: 'Postcode' } query matches the label attribute, and not the name attribute. Here's what the doc says:
You can query the returned element(s) by their accessible name. The accessible name is for simple cases equal to e.g. the label of a form element, or the text content of a button, or the value of the aria-label attribute.
You can see details here: https://testing-library.com/docs/queries/byrole
I have a requirement to add custom data attributes to the Fluent UI dropdown.
In javascript/html I could add them like this.
option data-passign="true" data-minpt="3" data-maxpt="6" value="7">Data Quality</option
Can someone help me achieve this in Fluent UI + React?
In FluentUI/React, it's much easier than that, no need for data- attributes, you can just add your custom data directly to the options list (and get it back in the event handlers, or as the selected value if you are using "controlled" scenario). Means, if you don't have a specific requirement to store additional item data in the HTML data attributes for "something else" (like ui-automation tool), then you could go with something like this (note the data property):
const YourComponent = (props) => {
const options = [
{ key: '7',
text: 'Data Quality',
data: { passign: true, minpt: 3, maxpt: 7 }
},
{ key: '42',
text: 'Weather Quality',
data: { passign: true, minpt: 100500, maxpt: 42 }
},
];
const onChange = (evt, item) => {
const itemData = item.data;
console.log(item.key, item.text, itemData);
};
return (
<Dropdown
label="Select something"
options={options}
defaultSelectedKey='7'
onChange={onChange}
/>
);
}
If you want a "controlled" control instead (this one is "uncontrolled"), check out the sample page for the Dropdown:
https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
I am trying to customize Input Text field of react-bootstrap-table2-filter similar option available at https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Column%20Filter&selectedStory=Programmatically%20Text%20Filter&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel
I am trying with below code snippet
let dataFilter;
const handleTextChange = (searchDataText) => {
console.log(searchDataText.target.value);
dataFilter(searchDataText.target.value);
};
// This is static and used to define Table Header properties
const columns = [{
dataField: 'data'
, text: ""
, headerFormatter: (column, colIndex) => (<i className="fa fa-podcast"> Name</i>)
, sort: true
, filter: textFilter({
getFilter: (filter) => {
// dataFilter was assigned once the component has been mounted.
dataFilter = filter;
}
})
, headerStyle: {backgroundColor: '#6495ed'}
, headerAlign: 'center'
, align: 'center'
}]
...
...
<Form.Control type="text" placeholder="Search POD" name="search_data_filter"
onChange={handleTextChange}/>
<BootstrapTable keyField='dataKey' data={this.state.tableRows}
columns={columns} bootstrap4={true}
defaultSorted={defaultSorted} striped
hover filter={filterFactory()}
pagination={paginationFactory()}
filter={filterFactory()}
/>
it is almost exact to the given instruction in the above link. But when I execute the code, In console output, I see typed in text is being captured correctly and when it is trying to pass to filter, error occurs ...
dataFilter is not a function
Any help suggestion, alternative approach to implement a custom Text Input as Filter Box outside of Table area?
I'm using a component from Ant Design and recently I added a button to select all options. The functionality is ok but in the field it shows the option keys or ids instead of showing the option names.
My question is, is there any way to show the option names when using setFieldsValue method in a multi-select component?
I have tried pushing an object with different properties (id, name, key, value, title, etc) in this part selecteds.push(kid.id); but none of those works.
My select funtion looks like this
selectAllKids = () => {
const { kids } = this.props;
let selecteds = [];
kids.map(kid => {
selecteds.push(kid.id);
});
this.props.form.setFieldsValue({
kids: selecteds
});
};
and my component:
{getFieldDecorator("kids", {
rules: [
{
required: true,
message: "Selecciona alumnos"
}
]
})(
<Select
size="large"
mode="multiple"
placeholder="Selecciona alumnos"
loading={kidsLoading}
>
{kids.map(kid => (
<Option key={kid.id}>{kid.name}</Option>
))}
</Select>
)}
My current result is:
My expected result is:
Thanks in advance!
You should map to name and not to id:
this.props.form.setFieldsValue({
kids: kids.map(({ name }) => name)
});