I am using "react-multiselect-checkboxes" plugin. The options passed to the dropdown have 'label' and 'value' which is common to any dropdown. However, when I supply a search term, the search result returns all the options that contain the search term in either 'label' or 'value'.
For example, from the below JSON array, it will return the first two elements if one searches for the term 'ee' because 'value' in the second element of the array contains 'ee':
{
"value": "bab11c73-7dc6-4949-a856-e6fbd7e5540f",
"label": "Sandeep"
},
{
"value": "3ce374c3-2843-4d64-b088-970e4nb3f7ee",
"label": "Arvind"
},
{
"value": "eb1a6465-da5e-4be0-b48d-7767623cd888",
"label": "Ayush"
}
]
This result is incorrect from the end-user point of view. How can we restrict the react-multiselect-checkboxes to search in only the label?
react-multiselect-checkboxes is based on react-select which by default searches in both value and label.
A fix for this was mentioned in this issue https://github.com/JedWatson/react-select/issues/4393#issuecomment-765396267
by default the component searches through both value and label. If you want to only search through the label you have to use the filterOption prop in conjunction with the createFilter function exposed from the package. This will create a new filter function based on a configuration you provide.
So I don't believe you can fix this out of the box with react-multiselect-checkboxes, and you would have to make some changes yourself.
If it's an option, consider using another lib that allows you to customize this
Related
I have an edit form, where I have an input that I'm sending an array of data through.
However, in the edit form, even though the input is returning me an array of data to edit, they are as a single value.
That is, if I remove a data returned in this input, all are removed. Also, the names in the input are all pasted together.]
What I'd like to try if it's possible is to return the data this way in the edit form:
And from that, I could remove the name "Melissa" and submit the form again. Through autocomplete, the user should be able to search for another name to replace "Melissa", without changing the values that are already present.
But I'm getting the data this way:
I created a Codesandbox of how I'm doing it in my code: https://codesandbox.io/s/intelligent-ace-9wbz44?file=/src/App.tsx
Can you help me with this?
I'm assuming you want to use testValue as the default options for your Autocomplete component.
Remove value={field.value}
Match testValue's type to studentOptions's type
const testValue = [
{
value: "João Lima",
label: "João Lima"
},
{
value: "Ana Clara",
label: "Ana Clara"
}
];
Change result to result={field.value ?? testValue}.
Working sandbox: https://codesandbox.io/s/condescending-euler-0gt9c9?file=/src/App.tsx
I'm trying to test a multiselect having all of its options unselected. I've found how to select multiple options by passing through an array of options, but passing an empty array generates an error.
$I->selectOption('Helper', []);
[PHPUnit\Framework\Error\Notice] Array to string conversion
Passing null doesn't work either:
$I->selectOption('Helper', null);
[InvalidArgumentException] Input "task[helpers]" cannot take "" as a value (possible values: "1", "2", "3", "4").
Is there a way to deselect all options for a multiselect on a form that loads with some of its options already selected?
OK, so I found a workaround by reading the source code of Codeception/lib-innerbrowser.
$I->selectOption('Helper', ['value' => []]);
However, this looks like a bug to me (that an empty array does not work as is).
We are trying to create a autocomplete input field which behaves more like the code editor autocomplete i.e it parses a nested json object / any other representation to fetch the next part.
As an example:
{
"user": {
"age": int,
"name": string,
"gender": string,
"company": {
"name": string,
"employee_count": int
}
}
}
In this case I want a dynamic input field which first suggests "user". On selecting user - it would show a drop down with age, name, gender & company. On further selecting user.company - it can show name and employee_count as dropdown items.
Context: we are building some API documentation and want to provide a search on various object paths.
Have seen this setup fairly frequently but not able to locate a standard way to implement this.
I can ofc use jQuery to keep manipulating the DOM and updating the dropdown options, but hoping for a neater solution.
I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.
My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?
If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilter or another part of react-table's API.
I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated!
`const columns = React.useMemo(
() => [
{
Header: 'Group Name',
accessor: 'name',
// disableGlobalFilter: true
},
{
Header: 'Created',
accessor: 'sector',
disableGlobalFilter: true,
},
],
[]
)`
Add this in the column array inside the column where you want to disable global filter
I am modifying a ReactJS component. I have added a react-table to get the pagination, which works beautifully. But one of the columns in the table needs to call a function that is also in this component, so it can render a link depending on the content of that record. (Some results will render a link, some will not.) When I list the function in the accessor property of the column, it returns some of the values from the function, but not all of them. So, the link comes back as:
localhost:3000/view/c/IDnumber/undefined.
Both the IDnumber and query should be returned, but the query parameter is "undefined".
I've tried listing the function in the accessor like:
getSerialNo(hit,query)
But then I get "hit is not defined".
I've searched on this site and others to find a solution.
The column looks like:
{id:'serialno',
Header: "Serial #",
accessor: getSerialNo
}
The function, in part, looks like:
const getSerialNo = (hit, query) => {
const linkAs = '/view/c/${hit._id}/${query}'
return <Link href={link} as={linkAs}><a target="_blank">{serialNo}
</a></Link>
I would like to get back a link that actually includes the query, like:
localhost:3000/view/c/IDnumber/query
according to documentation
accessor: String | Function
Required This string/function is used to
build the data model for your column. The data returned by an accessor
should be primitive and sortable. If a string is passed, the column's
value will be looked up on the original row via that key, eg. If your
column's accessor is firstName then its value would be read from
row['firstName']. You can also specify deeply nested values with
accessors like info.hobbies or even address[0].street If a function is
passed, the column's value will be looked up on the original row using
this accessor function, eg. If your column's accessor is row =>
row.firstName, then its value would be determined by passing the row
to this function and using the resulting value.
Its accept both string or function but make sure you set the id, you can do any operation on the row like row.attrbuiteName === null ? "no thing" : row.attrbuiteName
{
id:'serialno',
Header: "Serial #",
accessor: row => row.attrbuiteName
}
Reference:
https://github.com/tannerlinsley/react-table/blob/master/docs/api.md
Note in case using the function you must provide id in row
Yes, as mentioned above, you can call a function inside an accessor like so:
{
Header: 'Column header',
accessor: (row) => {
// some function that returns a primitive value you want to display in the cell
},
},
I'm adding an updated link to documentation as the one above does not seem to work anymore.