Is there a way to have the group labels in react-select selectable? I want to be able to do a search, have all of the relevant items to show in addition to their group label, and be able to click and select the group label (which has it's own ID value).
Here is exactly what you are looking for.
https://github.com/JedWatson/react-select/pull/2659#issuecomment-450700209
loadOptions = (value) => {
return this.getSuggestions(value).then(
rsp => {
const suggestions = this.filterGroupedSuggestions(rsp.data)
const creatable = {
label: `Search "${value}"`,
value: value,
group: 'search'
}
return [creatable, ...suggestions]
}
)
}
Related
How do I loop through all the options in a combobox using Playwright?
There is no list of options and the values are dynamically generated and at the moment this is what codegen has given me to firstly open the dropdown and then select one of the options:
await page.getByRole('button', { name: 'Open' }).first().click();
await page.getByRole('option', { name: 'Option Value 1' }).click();
Codegen only gives me the different options available in the combobox dropdown by name but I need to dynamically step through each option and select it.
I would probably do that by getting all inner texts of the combo and then enumerate over that, see below:
const combo = await page.getByRole('button', { name: 'Open' });
const comboOptions = combo.locator(`option`);
const comboOptions = await comboOptions.allInnerTexts();
const optionsCount = comboOptions.length;
for (let i = 0; i < optionsCount; i++) {
await combo.selectOption({ label: comboOptions[i] });
}
Please upvote and mark as answered if this helps :)
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 have a React address form which is config driven, and each element could either be a text <input> or a <select> dropdown. When trying to fill in the form using the code below, the text inputs are populated successfully, but the select element can't be found. If I remove the select elements from the loop and select them individually afterwards, it works fine. The MOCKS.deliveryAddress values are just strings.
const addressFields = {
addressLine2: Selector('[data-testid="input-addressLine2"]'),
addressLine1: Selector('[data-testid="input-addressLine1"]'),
addressLine3: Selector('[data-testid="input-addressLine3"]'),
addressLine4: Selector('[data-testid="input-addressLine4"]'),
postalCode: Selector('[data-testid="input-postalCode"]'),
};
const fieldConfig = {
addressLine1: 'text',
addressLine2: 'text',
addressLine3: 'text',
addressLine4: 'select',
postalCode: 'text',
};
const enterAddress = async () => {
await Promise.all(
Object.keys(addressFields).map(async (field) => {
if (fieldConfig[field] === 'text') {
if (MOCKS.deliveryAddress[field]) {
await t.typeText(
addressFields[field],
MOCKS.deliveryAddress[field],
{
replace: true,
},
);
}
} else {
await t.click(addressFields[field]);
await t.click(
addressFields[field]
.find('option')
.withText(MOCKS.deliveryAddress[field]),
);
}
}),
);
};
}
I get the error 1) The element that matches the specified selector is not visible.
Am I doing something wrong here in how I handle the selector inside a map?
Thanks in advance!
According to the TestCafe documentation, the element is considered as 'visible' if it does not have display: none or visibility: hidden CSS properties and has non-zero width and height. Using the browser development tool to investigate the properties of elements used in tests.
Turns out I was doing it wrong! I should have been chaining the click events for opening the dropdown and selecting an option, rather than awaiting the select click and then awaiting the option click. E.g.
await t
.click(addressFields[field])
.click(
addressFields[field]
.find('option')
.withText(MOCKS.deliveryAddress.addressLine4),
);
I am using Fluent UI DetailsList. My table looks like below:
I need filters below every column (text or drop-down) as shown below:
Please let me know if this is possible? Or maybe a way to display custom header (using html) ?
This actually turned out to be easier than I thought it'd be...
If you're ok with clicking the column header to reveal the choices (vs having the dropdown directly under the title) then this can be achieved using the ContextualMenu component in conjunction with DetailsList. I got it working by tweaking from the variable row height example in the official docs: https://developer.microsoft.com/en-us/fluentui#/controls/web/detailslist/variablerowheights.
Add a ContextualMenu underneath your DetailsList:
<DetailsList
items={items}
columns={columns}
/>
{this.state.contextualMenuProps && <ContextualMenu {...this.state.contextualMenuProps} />}
Inside your column definition, set the hasDropdown action so the user gets a UI indicator that they can/should click the header, and call a contextMenu method (note I'm using onColumnContextMenu as well as onColumnClick so it doesn't matter if they left or right click the header:
{
key: 'dept',
name: 'Department',
fieldName: 'dept',
minWidth: 125,
maxWidth: 200,
onColumnContextMenu: (column, ev) => {
this.onColumnContextMenu(column, ev);
},
onColumnClick: (ev, column) => {
this.onColumnContextMenu(column, ev);
},
columnActionsMode: ColumnActionsMode.hasDropdown,
}
When the onColumnContextMenu method gets invoked, we need to build the context menu properties that will get consumed by the ContextualMenu component. Note the dismissal method as well, which clears out the state so the menu is hidden.
private onContextualMenuDismissed = (): void => {
this.setState({
contextualMenuProps: undefined,
});
}
private onColumnContextMenu = (column: IColumn, ev: React.MouseEvent<HTMLElement>): void => {
if (column.columnActionsMode !== ColumnActionsMode.disabled) {
this.setState({
contextualMenuProps: this.getContextualMenuProps(ev, column),
});
}
};
Finally, inside of getContextualMenuProps you need to determine what the options should be for the user to click. In this example, I'm simply giving sort options (you'll need to add an onClick handler to actually do something when the user clicks the item), but I'll use the column to determine what those items should actually be and paint the filters into the items collection so the user can select one to filter.
private getContextualMenuProps = (ev: React.MouseEvent<HTMLElement>, column: IColumn): IContextualMenuProps => {
const items: IContextualMenuItem[] = [
{
key: 'aToZ',
name: 'A to Z',
iconProps: { iconName: 'SortUp' },
canCheck: true,
checked: column.isSorted && !column.isSortedDescending,
},
{
key: 'zToA',
name: 'Z to A',
iconProps: { iconName: 'SortDown' },
canCheck: true,
checked: column.isSorted && column.isSortedDescending,
}
];
return {
items: items,
target: ev.currentTarget as HTMLElement,
directionalHint: DirectionalHint.bottomLeftEdge,
gapSpace: 10,
isBeakVisible: true,
onDismiss: this.onContextualMenuDismissed,
}
}
Note the target on the ContextualMenuProps object, which is what tells the ContextualMenu where to lock itself onto (in this case, the column header that you clicked to instantiate the menu.
Detail list filter for each column without context menu -
https://codesandbox.io/s/rajesh-patil74-jzuiy?file=/src/DetailsList.CustomColumns.Example.tsx
For instance - Providing filter in text field associated with each column will apply filter on color column.
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)
});