benbowes / react-responsive-select Goto Github PK

Version: 7.0.2

If you supply a new set of options to the Select component, the component does not re-render with the new set of options.

React-Select for example re-renders the options dropdown when the options are changed.

Codesandbox (Click "Change Options"):
https://codesandbox.io/s/blazing-bush-oc8j8?file=/src/App.js

1. ReactResponsiveSelect component is initially 'disabled'
2. 'disabled' prop is passed as false so the component is active.
3. The dropdown fails to receive any mouse events.

Looks as though the mouse event listeners are setup in componentDidMount. If disabled is true at the point they hit this, they aren't initialised and with no opportunity to initialise them again.

Current work around: add a key to component that changes when disabled/active forcing the component to remount

how to implement optgroup ?
reference: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

Is there any possibility of Search or Filter feature?

I'm currently facing an issue trying to use react-responsive-select with formik and typescript.

This is how i'm using it:

`

                     <Select
                    name="tipo"
                    modalCloseButton={<ModalCloseButton />}
                    options={[
                        { value: 'C', text: 'Clienti' },
                        { value: 'F', text: 'Fornitori' },
                        { value: 'V', text: 'Vettori' },
                        { value: 'R', text: 'Referenti' },
                        { value: 'A', text: 'Agenti' },
                        { value: 'O', text: 'Collaboratori' },
                        { value: 'L', text: 'Altro' },
                    ]}

                    caretIcon={<CaretIcon />}

                    prefix="       "

                    selectedValue={formik.values.tipoEntry}

                    onChange={newValue => {
                        console.log("onChange", newValue);
                        console.log(formik.values.tipoEntry);
                        formik.handleChange({
                            target: {
                                value: newValue.value,
                                name: newValue.name
                            }
                        });
                    }}

                />

`

Typescript complains about newValue.value and newValue.name:
Property 'value' does not exist on type '{ altered?: boolean | undefined; text?: string | undefined; name?: string | undefined; value?: string | undefined; } | { altered?: boolean | undefined; options: { text?: string | undefined; name?: string | undefined; value?: string | undefined; }[]; }'. Property 'value' does not exist on type '{ altered?: boolean | undefined; options: { text?: string | undefined; name?: string | undefined; value?: string | undefined; }[]; }'. TS2339

It seems to me something wrong with the type of newValue. Any suggestion?

Can the mobile pop view have a close button ?

Problem

Currently the default CSS that comes with react-responsive-select does not cater very well for small screens. You open a Select and the options are displayed small; like on a desktop.

Solution

I would like to change the default CSS via a simple media query in the default CSS for small screens; making the options appear in a larger format on a small screen device. The thought is, it will make it easier to select an option on a smaller screen.

I don't know how people use the default CSS, if at all.

Essentially if you are on a small screen, the options panel will take up most of the screen width and around 70% of the height; showing a semi opaque background behind it.

If you have thoughts, share them.

allow user input box like image

Should be not very intrusive to replace current build/bundling with https://github.com/jaredpalmer/tsdx.

I might have a go with it and open a PR.

Hi!
I use react-typescript. It's all ok, but i recieved an error on noSelectionLabel attr:

 Property 'noSelectionLabel' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<ReactResponsiveSelect> & Readonly<{ children?: ReactNode; }> & Readonly<IProps>'.

I can use // @ts-ignore, but it's not a good practise. What can i do?
Sorry for my english :)

Hi @benbowes, thanks for creating this great library!

As I was integrating it, the only thing I'm having a hard time with is how onChange works. It seems that onChange passes all the selected options rather than the one selected/deselected. This requires a tedious diff every time to find which option changed. It seems like the library already knows that, so is there a way to receive that information?

(And please let me know if I'm missing something which is already there that I can use)!

Hi,

When setting selectedValues to an empty array for a multi-select control there is a type error (attempt to access property text on undefined).

I was trying to bind it to a property that will sometimes have elements and sometimes not.

Hi, I'm trying react-responsive-select and found it to be unbearably slow with my app. after digging a bit it seems the cause is the isEqual() function.

I have options defined as

  {
    markup: (<span dangerouslySetInnerHTML={{ __html: value }} />),
    text:   value,
    value
  }

which generates this object:

the JSON.stringify() call inside isEqual() generates some megabytes long strings...

What's the reason to use JSON.stringify? isn't a.value === b.value enough?

It would be useful to be able to define the label for the default / empty / first item separate to the options array for situations where you have a list of items to select from, but it's optional to select an item or you don't want any of them selected by default.

For the next version of React Responsive Select version 5.0.0, I intend to convert the codebase to TypeScript and use StoryBook as a demo platform. Converting to TypeScript will make it easier to make changes safely.

The outputted npm module will be usable with, or without TypeScript.

The is no intention to change the current functionality, but given there will be a substantial change to the way that RRS is built, It would be released as a major version.

I will be doing this in a completely seperate repo: https://github.com/benbowes/react-responsive-select-next

And as a seperate npm package:
https://www.npmjs.com/package/react-responsive-select-next

Then, once ready, moving it into the main repo.

When I try to use import ReactResponsiveSelect from 'ReactResponsiveSelect'; after installing react-responsive-select I get a message that the module cannot be found. If I change 'ReactResponsiveSelect' to 'react-responsive-select' all it imports is an empty object and throws other errors when I attempt to use it.

Suggestion:

When working with a controlled state select component, allow a function to be called when an option is selected.

Example use case:

Allow select all / clear of options belonging to a brand by allowing a callback function to be called in the parent scope

A little confused on how to mark a select as required for a form. In the past, I've typically used a listbox role to implement custom selects and was a little stumped once I started inspecting the select's markup and saw it utilized a role of menu.

I know the screen reader demo is provided as a proof-of-concept that it "works", but is it really following best practices for a "custom select"?

If I assign the prop caretIcon to a ReactResponsiveSelect component, the application freezes for a few seconds after each value change, and at the launch of the app the console returns this message:

index.js:1375 Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

If I don't assign the caretIcon prop, the application works fluently and it returns no warnings.
My CaretIcon component is identical to the one used in this repository:

const CaretIcon = () => (
    <svg
        className="caret-icon"
        x="0px"
        y="0px"
        width="11.848px"
        height="6.338px"
        viewBox="351.584 2118.292 11.848 6.338"
    >
        <g>
            <path d="M363.311,2118.414c-0.164-0.163-0.429-0.163-0.592,0l-5.205,5.216l-5.215-5.216c-0.163-0.163-0.429-0.163-0.592,0s-0.163,0.429,0,0.592l5.501,5.501c0.082,0.082,0.184,0.123,0.296,0.123c0.103,0,0.215-0.041,0.296-0.123l5.501-5.501C363.474,2118.843,363.474,2118.577,363.311,2118.414L363.311,2118.414z" />
        </g>
    </svg>
);

Since I think the warning is referring to the li elements with role="menuitem", how do I add a key to them? Or is there another solution?

index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: Select

Add an onBlur prop for onBlur controlled validation

Improve readability of code with typescript

I can't access the input element inside the rowData. Does anybody know how to do it?

This is the content of rowData:

{ text: 'Search', value: 'foo', markup: <input type="text" id="merchantSearch" placeholder="Search Merchant" value={keyword} onChange={handleInputChange} /> }

In the README.md, the install script is: npm install react-responsive-select -D is there a reason that the recommended installation type is as a dev dependency? Shouldn't this be a production dependency if you're using this in a react component.

In the case where the index of options equals the selected value, the onChange event is called and the component will stop that event until refresh.

There is a check here that doesn't make sense to me. There are times where a selectedValue will === the index which fails to call the onChange.
https://github.com/benbowes/react-responsive-select/blob/master/src/ReactResponsiveSelect.js#L71

I made a change but need permission to push up my change.

Thanks

This implementation currently uses the window object which is not available when server side rendering. I found these usages of the window object. Is it possible that this could add support for server side rendering?

• Review the current docs, and determine where improvements can be made

After upgrading to the new version of React I see this deprecation warning:

Is it possible to follow new changes and drop componentWillReceiveProps using?

Has anyone used RRS in multiselect mode with Formik?

When using a keyboard to change input the onChange event is fired every time a user presses up or down key. This is does not correlate with native behaviour when change is only triggered when spacebar or enter is hit.

Why does this lib follow a different pattern?

How can I get the onChange event to fire when a user confirms their selection by hitting space/enter?

Version: 7.0.2

If we supply an empty array as options, the Select crashes the app with Cannot read property 'text' of undefined.

Please still render the dropdown with some placeholder defaults instead of crashing the javascript.

React-Select for example has placeholder defaults when supplied an empty array.

Codesandbox (Change line 10 to be an empty array):
https://codesandbox.io/s/empty-star-l6mpv?file=/src/App.js

Create a navigation system - the one pager is hard to navigate

Hello!

I am experiencing an issue where nextPotentialSelectionIndex is not updating to the same value as singleSelectSelectedIndex and singleSelectInitialIndex.

Context:
I am using 2 React-responsive single selects to select the date range on a data visualization I am building. The data is in the form of years and quarters. Each year has anywhere from 1-4 quarters associated with that specific year.

The first select allows the user to choose a year.
The second select allows the user to choose a quarter from a list of available quarters for that specific year.

For examples' sake here is the overall data:
data: [ { year: 2000, quarters: [1, 2, 3, 4] }, { year: 2001, quarters: [1, 2, 3] }, ]

The Data that is used for the year options:
years: [ {text: 2000, value: 2000}, {text: 2001, value: 2001} ]

The data that is used for the quarter options when the year 2000 is selected from the 1st dropdown:
quarters: [ {text: 1, value: 1}, {text: 2, value: 2}, {text: 3, value: 3}, {text: 4, value: 4} ]

The data that is used for the quarter options when the year 2001 is selected from the 1st dropdown:
quarters: [ {text: 1, value: 1}, {text: 2, value: 2}, {text: 3, value: 3} ]

• If the user selected the year 2000, then the user could select from the 2nd dropdown quarters 1, 2, 3 or 4

• If the user selected the year 2001, then the user could select from the 2nd dropdown quarters 1, 2, 3

• Upon first render of the application, the 1st dropdown will have the preselected value of 2000 and the 2nd dropdown will have the preselected value of 1, indicating that the year 2000, Q1 is the initial state.

Issue

• After the initial render (selected year is 2000, selected quarter is 1), the user selects quarter 4 from the second dropdown.

• If the user then selects year 2001 from the first dropdown, the quarter dropdown will re-render to only have the options of choosing quarters 1-3. Initially quarter 1 is displayed, which is the expected behavior.

• Using react-chrome-devtools, I can see that the nextPotentialSelectionIndex displays value 4 whereas singleSelectSelectedIndex and singleSelectInitialIndex display value 1. The nextPotentialSelectionIndex is out of sync with the singleSelectSelectedIndex and singleSelectInitialIndex.

• Upon clicking the 2nd dropdown, it tries to render value 4, but value 4 does not exist as an option, because the user selected 2001 from the 1st dropdown and 2001 only has the options 1 - 3.

• Upon clicking the 2nd dropdown again the nextPotentialSelectionIndex then gets in sync with singleSelectSelectedIndex and singleSelectInitialIndex. Value 1 is displayed as the selected option again. nextPotentialSelectionIndex, singleSelectSelectedIndex and singleSelectInitialIndex all reference value 1.

I don't know if I am missing something in the onChange() function to update this piece of data, but I can't seem to figure out how to solve this issue.

Please let me know if you need further information. Thank you for your help!

i don't want my first option to reset the whole dropdown. Any solution?

When working with a controlled state select component, allow a component to be rendered before the options listing

use case:

Allow controlling state to be updated without selecting an option

Selecting an option in a controlled multiselect resets the menu's scroll position

Demo
https://codepen.io/thedistricts/pen/gvaXwr

1. Open Multiselect
2. Select 'Test5'
3. Notice the scroll position has returned to the top of the menu

Expected behaviour: Persist scroll position between selecting options

The dropdown will close when click on scrollbar.

When using the scrollbar in the dropdown to scroll it closes the dropdown instead of scrolling.
The only way to currently scroll through the dropdown list is by using the scroll wheel on the mouse.

The effect can be seen in this codepen

I'm using the latest version of Chrome, but I get the same issue on Brave, Firefox ans Edge.

onchange event is not triggered first time if options are selected with keyboard.

I Created a Formik Component for RRS, so as to reuse it instead of repeating so many codes while creating form but whenever I use the component, it slows down every other components on the form. If I use the RRS component directly on the form, it is fast. When I now used Formik Component, it was slightly faster but still slow.

This is the reuseable formik component code

import * as React from 'react'
import RRS from 'react-responsive-select';
import { Formik, Form, Field, FieldProps } from 'formik'
import { FormFeedback, FormGroup, Input, InputGroup, InputGroupAddon, InputGroupText, Label } from "reactstrap";
import "react-responsive-select/dist/ReactResponsiveSelect.css";
import { ErrorIcon, CaretIcon } from './Icons'


const SyncRRSInput = ({
    field, 
    iconOrText,
    form: { touched, errors, setFieldValue, values, handleBlur }, .
    ...props
}) => {
    const { options, isRequired = false, label, showLabel = false, multiselect = false } = props
    const icon = iconOrText ?? ""
    let error = errors[field.name];
    let touch = touched[field.name];
    let currentValue = values[field.name];

    return (
        <FormGroup>

            {showLabel ? <Label for={props.id || props.name} className={props.labelColor}>{label}</Label> : ""}
            {/* <label htmlFor={props.id || props.name}>{label}</label> */}

            <RRS
                {...field}
                {...props}
                options={options}
                selectedValue={values[field.name]}

                caretIcon={<CaretIcon key={`${field.name}-caret`} />}
                onChange={({ value, name }) => {
                    if (props.onSelectChange) {
                        props.onSelectChange(value)
                    }
                    if (value) {
                        //setFieldValue(field.name, multiselect ? option.map(x => x.value) : (option).value || "")
                        setFieldValue(field.name, value)
                    }
                    else {
                        setFieldValue(field.name,  "")
                    }
                }}
                onBlur={({ value, name }) => {
                    handleBlur({ target: { value, name } });
                }}

            />


            {touched[field.name] && errors[field.name] && (
                <div className="error text-danger">&nbsp;<ErrorIcon /> {errors[field.name]}</div>
            )}
            {error && <FormFeedback>{error}</FormFeedback>}

        </FormGroup>
    )
}

Used it in my form like this. If I should change the to , it is a little bit faster.

<Field
                                            name="currentStatus"
                                            component={SyncRRSInput}
                                            options={attendance.map(x => {
                                                return {value: x.value, text: x.label}
                                              })}
                                            showLabel={true}
                                            label="Status"
                                            isRequired={true}
                                            
                                        /> 

Note: I made use of reactstrap.

Hello again!

I'm running into an issue where the onChange() event handler is firing twice upon making a selection. Building upon the scenario given in #117, here is the updated context:

I am using 3 react-responsive single selects to select a start and end date range for a data visualization. Data is in form of years and quarters, where each year has anywhere from 1-4 quarters associated with that specific year.

The first two dropdowns, start year and start quarter control the start range.

The third dropdown, end year, controls the end range.

Every time a user makes a new selection from one of these dropdowns, a chart is updated to display the newly selected date range and its associated data.

Updated Data Structures:

The quarterData shows that for each year/quarter pair any amount of data could be associated with it, ie. GDPGrowth, GDPPlus, attrition, ect.
const quarterData = [
{ year: 2000, quarter: 1, GDPGrowth: 1.3 },
{ year: 2000, quarter: 2, GDPGrowth: -2 },
{ year: 2001, quarter: 1, GDPGrowth: 2.5 },
{ year: 2002, quarter: 1, GDPGrowth: 4.5 },
{ year: 2002, quarter: 2, GDPGrowth: 2.8 },
{ year: 2002, quarter: 3, GDPGrowth: -3.2 },
{ year: 2002, quarter: 4, GDPGrowth: -0.1 },
{ year: 2003, quarter: 1, GDPGrowth: 4.5 },
{ year: 2003, quarter: 2, GDPGrowth: 2.8 },
{ year: 2003, quarter: 3, GDPGrowth: -3.2 },
{ year: 2003, quarter: 4, GDPGrowth: -0.1 },
{ year: 2004, quarter: 1, GDPGrowth: 4.5 },
{ year: 2004, quarter: 2, GDPGrowth: 2.8 },
{ year: 2004, quarter: 3, GDPGrowth: -3.2 },
{ year: 2004, quarter: 4, GDPGrowth: -0.1 },
{ year: 2005, quarter: 1, GDPGrowth: -0.9 }
];

In this data set, we have the associated quarters for each year options. Each quarter has its index in the quarterData dataset.
const yearData = [
{
year: 2000,
quarters: [{ quarter: 1, index: 0 }, { quarter: 2, index: 1 }],
yearIndex: 0
},
{
year: 2001,
quarters: [{ quarter: 1, index: 2 }],
yearIndex: 1
},
{
year: 2002,
quarters: [
{ quarter: 1, index: 3 },
{ quarter: 2, index: 4 },
{ quarter: 3, index: 5 },
{ quarter: 4, index: 6 }
],
yearIndex: 2
},
{
year: 2003,
quarters: [
{ quarter: 1, index: 7 },
{ quarter: 2, index: 8 },
{ quarter: 3, index: 9 },
{ quarter: 4, index: 10 }
],
yearIndex: 3
},
{
year: 2004,
quarters: [
{ quarter: 1, index: 11 },
{ quarter: 2, index: 12 },
{ quarter: 3, index: 13 },
{ quarter: 4, index: 14 }
],
yearIndex: 4
},
{ year: 2005, quarters: [{ quarter: 1, index: 15 }], yearIndex: 5 }
];

The Data that would used for the start year options:
The value corresponds to the years' index in the yearData array.
years: [ {text: 2000, value: 0}, {text: 2001, value: 1}, {text: 2002, value: 2}, {text: 2003, value: 3},
{text: 2004, value: 4}, {text: 2005, value: 5} ]

The data that is used for the quarter options when the year 2000 is selected from the start year dropdown:
The value corresponds to the quarter's index in the quarterData array
quarters: [ {text: 1, value: 0}, {text: 2, value: 1} ]

It is also helpful to know the rules for displaying data that influence how the dropdowns function.

1. The user cannot select a year in the past from the end year dropdowm
   a. We limit the end year options to ensure the user never selects a year from the end year dropdown that is earlier than the start year dropdown.
   b. Every time the user selects a new start year, the end year options will update accordingly

2. At least 1 quarter of data must be used to power the data visualization
   a. For example, if a start year only has one quarter available, we do not allow the user to select that same year as an end year because that would mean that the range from the start year/quarter to the end year could not display more than one quarter
   b. I.e. Using the data above, if the user selected the start year as 2001, we would not allow the user to select 2001 from the end year dropdown because 2001 only has one available quarter of data

3. If the user selects a year/quarter in the future (ie. the start year is greater than the end year), then we either:
   a. If the last quarter in the start is selected, then we push the selected year by one more than newly selected start year.
   b. Set the end year to be the newly selected start year
   c. For example:
   i. 2001 Q1 is the Start and 2002 is the End
   ii. The user selects a start year of 2003
   iii. This date is in the future, the new start year will be 2003 and the new start quarter will be the first available quarter, Q1. The last quarter is not selected, so the new end year will be 2003
   iv. If the user then selects Q4, without changing the start year, the new start will be 2003 Q4, to satisfy the rule of displaying at least 1 quarter of data, the end year must be pushed to 2004.

With this context in mind, here is the issue at hand:
The event handler for this.onChangeEndYear is firing twice every selection. I think the issue stems from the key attribute set to the end-year react-responsive single select.

• if the key is set to a static variable, ie. key={2}
  • event handler only fires twice when selecting the first year in the dataset, 2000
  • it fires to update the end-year to the year 2000, it then fires again to update the end-year as 2005. Upon clicking the end-year dropdown, it displays the year 2000. Then clicking the end-year dropdown, it displays the year 2005.
• if the key is set to a dynamic variable, it must be set to a key that will not clash with the start-quarter key, i.e. `key = {endSelectedYear.yearIndex}
  • the onChange() event handler fires twice when selecting any year from the end-year dropdown
  • it only causes UI issues when selecting the first year in the dataset, the year 2000
    • it fires to update the end-year to the year 2000, it then fires again to update the end-year as 2005. Upon clicking the end-year dropdown, it displays the year 2005 as the selected year and the UI will not update to display the correctly selected year, 2000.

Here is a codepen link to the above issue I am describing: https://codesandbox.io/s/7jxjlly7jj

Please let me know if you need more context. Im happy to provide further information that will help get to the bottom of this issue. Thanks!!

I have a use case in which I would like individual options to be visible in the list, but not able to be selected. Would be nice (for me) if RRS had this capability. Thanks!

I've using this component in a project for a client it has been working just fine, but i think i've stumbled in to a bug with the single select option.
I have a couple of side filters that are being showed as singleselect or multiselect dropdowns, i also have a method that calls a function that reset the values in the redux store and returns them to their original values. All the multiselects work just fine but the single select although it updates its value to the original, visually it remains as the last picked option.
Filters with default values:


Filters with changed values in this case the singleselect one:


After pushing the reset button singleselect doesnt update:

And the relevant code
Html code:
<div> <form> <Select name="Criticality" options={selectCriticality} caretIcon={<CaretIcon key="l5" />} prefix="Criticality: " onSelect={criticalitySelectSelection} /> </form> </div>

Function that calls the action from the reducer that resets the values:
resetSideDependenciesFilters = () => { const { sideFiltersFields, resetSideFilters } = this.props; resetSideFilters().then(() => { this.createSideFiltersDropdownFields(sideFiltersFields); }); };
It although the component value is updated and has the correct value stored, its visual representation doesnt follow along, and this only happens with single select, since with multi select everything updates just fine, maybe because the multiselect dropdown uses the selectedValues props. But i have tried with the singleselect option and it also doesnt work so im at a loss here, hope i can get some help in debugging this rather annyoing case.

Can you please kindly point me to the right direction if I have to make this work in react v16?

Hi, if you look at this example:

https://codesandbox.io/s/peaceful-lewin-csrnm

changing the disabled prop on a new render doesn't disable the select. The select is disabled only if disabled is true on the component mount.

Module not found: Can't resolve 'lodash.isequal' in '\node_modules\react-responsive-select\dist'

I prefer Styleguidist these days over StoryBook as I find it better from a developer perspective.

• gives a great code editor inline; allowing developers the ability to experiment with various settings
• storybook is great for the "everybody", I want to skew my focus towards developers
• after considerable time with both platforms, I consider "styleguidist" to be the better of the two in terms of documenting components

How to replicate 1:

• Select an option
• Close the options panel
• Open the options panel (click or arrow key)
• Select the same option

Result: The select loses focus

How to replicate 2:

• Select an option
• Close the options panel
• Open the options panel (click or arrow key)
• Select the same option with the arrow keys and click enter

Result: The select loses focus

How to replicate 3:

• Select an option
• Close the options panel
• Open the options panel (click or arrow key)
• click enter

Result: The select loses focus

This all points to the same function that handles focus logic. This can be fixed by passing the selectBox dom to the function and determining whether the document.activeElement is contained within the selectBox dom.