I am trying to upgrade react-select version from 1.0.0-rc.10 to 3.1.0. I'm getting following error
jquery.js?eedf:3869 Uncaught TypeError: Object(...) is not a function
My current react version is - 15.6.2
I want to upgrade react-select for the following reason:
When user type in react-select( Component) there is a little delay i see in box(where i've used Component). The text in the box appears in little late (300ms ~ 500ms)
Current code (v1.0.0) for Select:
const props = {
className: 'search-combobox',
placeholder,
onChange: this._onSelectionChange.bind(this),
onSelect: this.props.onSelectedItem,
options: this.state.immSearchOptions.toJS(),
filterOptions: this._filterOptions.bind(this),
onInputChange: this._onInputChange.bind(this),
valueKey: 'id',
};
<Select {...props}
autoFocus={true}
clearable={true}
closeOnSelect={true}
maxMenuHeight={300}
escapeClearsValue={true}
onBlurResetsInput={false} />
Related
I'm trying to build a custom panel option editor in web app called Grafana, but am running into an error I suspect is no more than a React syntax issue.
195:15 error Component definition is missing display name react/display-name
export const optionsBuilder = (builder: PanelOptionsEditorBuilder<SVGOptions>) => {
return builder
.addBooleanSwitch({
category: ['SVG Document'],
path: 'svgAutoComplete',
name: 'Enable SVG AutoComplete',
description: 'Enable editor autocompletion, optional as it can be buggy on large documents',
})
.addCustomEditor({
category: ['SVG Document'],
path: 'svgSource',
name: 'SVG Document',
description: `Editor for SVG Document, while small tweaks can be made here, we recommend using a dedicated
Graphical SVG Editor and simply pasting the resulting XML here`,
id: 'svgSource',
defaultValue: props_defaults.svgNode,
editor: (props) => {
const grafanaTheme = config.theme.name;
return (
<MonacoEditor
language="xml"
theme={grafanaTheme === 'Grafana Light' ? 'vs-light' : 'vs-dark'}
value={props.value}
onChange={props.onChange}
/>
);
},
})
};
To use a custom panel option editor, use the addCustomEditor on the OptionsUIBuilder object in your module.ts file. Configure the editor to use by setting the editor property to the SimpleEditor component.
The tutorial in the Grafana Docs explains more about what I'm doing, but I believe the issue is just with the arrow function I use at line 195.
Is there a different way I should be retrieving my editor property?
I am using material-table. The TablePagination is not working. It throws an error in console.
I tried installing the package as per the documentation.
https://material-table.com/#/docs/install
npm install material-table --save
npm install #material-ui/core --save
And I get getting this errors:
Material-UI: The key caption provided to the classes prop is not
implemented in ForwardRef(TablePagination). You can only override one
of the following: root,toolbar,spacer,selectLabel,selectRoot,select,selectIcon,input,menuItem,displayedRows,actions.
Warning: Failed prop type: The prop onPageChange is marked as
required in ForwardRef(TablePagination), but its value is
undefined.
Warning: Unknown event handler property onChangePage. It will be
ignored.
Warning: Unknown event handler property onChangeRowsPerPage. It will
be ignored.
versions:
"#material-ui/core": "^5.0.0-alpha.24",
"material-table": "^1.69.2",
If I try to paginate it throws error in console.
Uncaught TypeError: _this.props.onChangePage is not a function
Sample Code:
<MaterialTable
icons={tableIcons}
columns={columns}
data={editable}
title="Orders"
localization={{
toolbar: {
searchPlaceholder: 'Filter',
searchTooltip: 'filters the given text'
},
header: {
actions: 'Actions'
}
}}
actions={[
{
icon: 'save',
tooltip: 'Save User',
onClick: (event, rowData) =>
alert('You saved ' + rowData.name)
}
]}
options={{
actionsColumnIndex: -1,
selection: true,
exportButton: true,
showFirstLastPageButtons: true,
pageSize: 5,
padding: 'dense',
pageSizeOptions: [5, 20, 50]
}}
/>
I came across the same issue. For me, it is caused due to latest version of #material/core#4.12.1, Due to deprecated methods in TablePagination. As material-table uses this and not upgraded these deprecated methods it is throwing the error.
I was able to solve this by downgrading #material-ui/core version to 4.11.4 and keeping the material-table version to 1.69.3. On the other hand, as #knock-out has mentioned. You can create your own material-table component. Just change the -version
Hope this is helpful!
For me I managed to solve this by removing an old material-ui module and installing a new one
npm remove material-table
npm install #material-table/core
And then in the code
replace
import MaterialTable from 'material-table';
with
import MaterialTable from '#material-table/core';
kudos to #Chris Livdahl answer
I'm finding that the material-table repository is not kept up-to-date with the latest Material UI changes. Instead, take a look at the fork of material-table here: https://github.com/material-table-core/core, support for Material UI v4, with a "next" version in the works for v5.
Changing the code was very easy to adapt to the new repository. Follow the instructions here: https://material-table-core.com/docs
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?
I am calling the component FullCalendar in my code. For the Calendar I need two plugins to be loaded. The dayGridPlugin and the interactionPlugin. However when I pass them both in the attribute 'plugins', it only loads the first plugin I pass in. I could not find documentation on this specific problem which is why I'm asking here. I'm guessing I made a error in the way I pass them in.
<FullCalendar
defaultView="dayGridMonth"
plugins={[dayGridPlugin, interactionPlugin]}
events={[
{ title: 'event 1', date: '2019-10-01' },
{ title: 'event 2', date: '2019-11-01' }
]}
selectable='true'
/>
The interaction plugin was working but I did not realize that I had to use the dateClick attribute and not the selectable attribute. The dateClick allows you to have a event handler for when for when a date is clicked. It is passed in as the parameter event.
I have a component that receives a badge prop (see example down below). The badge is optional, but once it is used I want it to have some required fields inside it. I've tried the following:
Component.propTypes = {
badge: PropTypes.shape({
src: PropTypes.string.isRequired,
alt: PropTypes.string.isRequired,
}),
}
It works, but I get this warning on Chrome when trying to use it without the badge:
Warning: Failed prop type: The prop badge.src is marked as required
in Component, but its value is null.
What is the proper way of doing this?
Component usage example:
badge={{ src: 'usa.png', alt: 'United States' }}
badge not supplied
This is the correct way to do this. I was very intrigued by how this wouldn't work, so I pasted it in a CodePen (https://codepen.io/Oblosys/pen/xLvxrd) and it works just as expected. (Open a console, and uncomment the failing one to see a prop-type error)
Something else must be going wrong in your code, and at some point you render a Component with a badge property object that has src: null. Maybe before data from an api request has arrived? With some console logging in Component and its parent, you should be able to find the culprit.