aidurber / react-picky

Yet another React multiselect. With checkbox support instead of tags.

Greetings, traveller 👾

react-picky's Issues

Problem with sellect all work opposite to expected

Version

4.1.2 use with TypeScript

Here's what went wrong:

I have a problem with sellect all, default is checked even when pass to the value props empty array. After select one value is unchecked and work fine. But when i pass to the props array with all selected value in opstions sellect all is unchecked.

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.8.0 to 3.9.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.9.1 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Additional prop for x selected

An additional prop, not sure on the name, maybe manyDisplayedPlaceholder.

Not sure if a render prop or a sprintf style input like:

"You have selected %s" 

The render prop would be called with the number of selected items.

Leaning towards the latter.

An in-range update of react is breaking the build 🚨

There have been updates to the react monorepo:

• • The devDependency react was updated from 16.6.1 to 16.6.2.

• The devDependency react-dom was updated from 16.6.1 to 16.6.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the react group definition.

react is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Support objects

Should support objects i.e.
[{id: 1, name: "Test"}, { id: 2, name: "Another One"}]

With support of supplying value and label props

<Picky valueKey="id" labelKey="name" ... />

Placeholder Strings

Following the last issue i opened (#29) regarding the placeholder, there is some more strings that are hard-coded.
They are:

• Select all(should be a prop?)
• None Selected(prop again?)

This way, everyone can use your component in whatever language they need, or using any strings they want.

support custom render of select all

Version

1.5.1

Here's what went wrong:

I use a custom render for the list items, but now the select all item looks very out of place. Having a custom renderer prop for the select all button would help resolve this. This might also allow for including a "deselect all" button.

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

---

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

---

Good luck with your project ✨

Your semantic-release bot 📦🚀

An in-range update of react-testing-library is breaking the build 🚨

The devDependency react-testing-library was updated from 5.6.0 to 5.6.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

react-testing-library is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v5.6.1

5.6.1 (2019-02-11)

Bug Fixes

• TS: typing of testHook (#292) (8436c7e)

Commits

The new version differs by 1 commits.

• 8436c7e fix(TS): typing of testHook (#292)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Allow customizing using styled-components

Hi,

Would be very useful if we could pass a custom class for the component, for the sake to customize it using, for example, styled-component. Currently, it keeps only `.picky' class

import Picky from 'react-picky'
import styled from 'styled-components'

const Select = styled(Picky)`
   background-color: grey
`

Currently, as I mentioned, className is fixed

<div
  ref={node => {
    this.node = node;
  }}
  className="picky" />

It could be something like that:

className={[className, 'picky']}

Best regards

Select all checkbox unchecked after Select All > Deselect one > Reselect one

Version

2.0.6+

Here's what went wrong:

• Select all
• Deselect a single value
• Reselect the single value
• Note the select all checkbox is unchecked even when all items are selected

Related to #68

Localise terms

Missing localisation for in-built terms.

Item Height

Version

Here's what went wrong:

Is it possible to set the item height as auto? I have diferent values coming from the DB and right now they are overlapping each other, since there is strings that contain only a few characters, and some that are more long.
Very good library btw :)

Programatically changing the state to select all values does not set the select all checkbox

Version

4.1.0

Here's what went wrong:

Seems like there is a synchronization issue where if the state is changed to select all values, the 'Select all' button (if enabled) is not checked.

See here to reproduce the bug:
https://codesandbox.io/s/9351z3moqr

1. Click on the Select button at the top, which will select Item 1 and Item 2. Notice the Select all button is not checked but it should be.
2. Click on the Select all button. Due to the internal states being out of sync, the select all is now effectively selecting all the values rather than unchecking all the values (effectively re-syncing the state).
3. Click on the Select all button again. This will now correctly uncheck all the values.

add placeholder filter

Version

Here's what went wrong:

dropdownHeight should set max-height instead of height

Version

1.5.1

Here's what went wrong:

dropdownHeight prop sets "height", not "max-height", so that few options results in extra dropdown space.

p.s. thanks for this!!! I had the exact same problem this is trying to solve. It's a great start, and I imagine it will become quite used. A couple more issues forthcoming...

[Multiselect] Placeholder shows selected items in reverse order

Version

1.2.3

Here's what went wrong:

When selecting options, before numberDisplayed kicks in, it shows selected items in reverse order.

Should have basic sorting of labels.

Losing focus should close dropdown

Version

1.4.1

Here's what went wrong:

Clicking the anywhere but the component should close the dropdown.

issue with renderList custom function

I want to add "Clear All" Option in list. But facing issue

renderList={({ items, selected, multiple, selectValue, getIsSelected }) =>
  this.renderCustList(items, selected, multiple, selectValue, getIsSelected)
}

renderCustList(items, selected, multiple, selectValue, getIsSelected) {
       let myarray = [];
       myarray.push(
           <li >
             <strong>Clear All</strong>
           </li>
       )
       items.map(item => (
           myarray.push( <li key={item.id} onClick={() => selectValue(item)}>
             {getIsSelected(item) ? <strong>{item.name}</strong> : item.name}
           </li>
           )
         ))
         return myarray;
   }

Issue: Its rendering as expected but When i select multiple value and unselect the values one by one. list is getting closed.
Ex: if i selected 4 items, and if i unselect any one item then the list is getting closed. again i have to open the list to unselect another item.

Expected: It should keep open the list until i click outside.

Can someone please help me on this.

Thanks,
Prabhu

Need custom data onChange of value

I am using react-picky in loop and displaying multiple dropdowns using package, my requirement is i need custom data onChange of value so i can use it to make generic handleOnChange method. Please suggest how can i get custom data related to dropdown

Make typescript a first class citizen

Before the great refactor I want to migrate to TypeScript. The strongly typed-ness will come in handy.

I also don't want to keep maintaining the type definition file, (which I've already begun to neglect).

Not too difficult of a task. Just don't break the API.

make search box selected by default

I suggest making the search box selected by default if it is enabled. Click. Start searching.

Accessability Improvements

Hello again Aidurber,

Why does the aria-owns attribute have a invalid value? Is there a reason for it to be empty? And if you have a aria-role attribute in the parent, you should have them on the childrens, according to a colleague of mine. Is there any way for us to fix this?

Regards,
André Bastos

Improve composition with compound component

Placing here for reference.

The component wasn't initially designed for use with virtual lists and render props. Which it should have. Due to this the code needs a refactor to better allow custom rendering.

One approach would be to make it a compound component with an API that might look like:

const options = [1, 2, 3, 4, 5];

<Picky options={options} value={2}>
    <Picky.Button allSelectedText="All Selected" numberDisplayed={3} />
    <Picky.Input placeholder="Filter..." />
    <Picky.Menu>
        {({item, isSelected})=>{
            <Picky.Item text={item} />
            //.. or custom rendering
            <div>{item}</div>
        }}
    </Picky.Menu>
</Picky>

Allowing for flexible composition like:

<Picky options={options} value={2}>
    <Picky.Menu dropUp={true}>
        {({item, isSelected})=>{
            <Picky.Item text={item} />
            //.. or custom rendering
            <div>{item}</div>
        }}
    </Picky.Menu>
   <Picky.Button allSelectedText="All Selected" numberDisplayed={3} />
   <Picky.Input placeholder="Filter..." />
</Picky>

The current API could still be supported by it using the above API internally.

Disable options

Hello!

I've been playing around with certain ideas with the options and i was wondering if there is a way to disable certain options?

Thanks,
Karan Kumar

Add code sandbox and screenshots

• Add code sandbox for demos
• Add screenshots

Picky Dropdown retains the filtered list when re-opened.

Version

2.0.5

Here's what went wrong:

When you select the dropdown, type a search string on the filter and close the dropdown and open it again - the dropdown shows the filtered list with the filter input empty. The only way to get back to the original state (options) is to type in something and then manually delete it.

You can test it out in the sandbox: https://codesandbox.io/s/qq1689zk3q

Is there a way to access the this.state,filtered flag and set it to false on close of the dropdown list?

Passing initial value to component shows them selected but the items aren't highlighted

Version

1.8.0

Here's what went wrong:

Passing an initial array of selected items shows the number selected items but the items aren't selected.

https://codesandbox.io/s/k9no0r2w05

Support uncontrolled components

Users might not want a purely controlled component. If no value prop is provided then it's an uncontrolled component.

isControlled(){
   return this.props.value != null
}
// ...
// Any reference to this.props.value, check if isControlled() 
// if it is use .props.value else use state.selectedValue

MultiSelect max limit for options

I was trying to figure out how to limit the number of selections in the multiselect option. For example: if my total number of options are 6, but the user should not select more than 3.

Make number of selected items dynamically

Is it possible to make the number of selected items necessary to show the message "X selected numbers" dynamic? that is, having a prop that decides what that number should be?

Object options with valueKey is not working

Version

3.0.2

Here's what went wrong:

Setting an array of objects as options with a valueKey to define wich key are the values and setting an array of value doesnt work (none get checked)
There is a least a bug in :

  isItemSelected(item) {
    [...]
    return hasItem(value, item, this.props.labelKey, this.props.valueKey);
  }

because hasItem has the 2 last arguments reversed (valueKey THEN labelKey):

export const hasItem = (all, item, valueKey, labelKey, returnIndex) => {
  [...]
});

But setting valueKey and labelKey as the options' label and value as an array of options' values doest work either, so there is also another bug somewhere.

IE 11 Compatibility

Hello,

Your library does not work with IE11.
I traced the problem to the "includes" method that you use when verifying the placeholder props. IE11 does not recognize that method. Is it possible to swap to a polyfill alternative?

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.8.0 to 3.9.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.10.0 to 1.11.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

Dropdown list appears behind the button of another picky

Version

1.4.0

Here's what went wrong:

How can I pass the event to the selectMultipleOption method, and not only the value?

How can I pass the event object to the selectMultipleOption method, and not only the value selected?

More styling control for picky__input (trigger button).

Version

4.1.2

Here's what went wrong:

Would like to control the css style of the button classname="picky__input" such as when the dropdown is opened, the background color is changed. Motivation: using Atlaskit and Reactstrap, but fall short for long dropdown lists (checkboxes), and need to use their style for the Picky component.

Possible solutions:

• Add prop for triggerButtonProps for trigger button. Or classname prop for trigger button.
• Perhaps there is a way to extend with Styled and CSS selectors and set picky classnames (tried but I could not get this to work. Idea would be to add open|close to Picky classnames, and have CSS selector to change style since button is a child of 'picky'.

An in-range update of enzyme is breaking the build 🚨

There have been updates to the enzyme monorepo:

• • The devDependency enzyme was updated from 3.8.0 to 3.9.0.

• The devDependency enzyme-adapter-react-16 was updated from 1.9.1 to 1.10.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the enzyme group definition.

enzyme is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build failed (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

select all is not working properly

Version

Here's what went wrong:

when I click on select all it is selecting all options but when I de-select any option select all is not unchecked.it is in checked status and in the placeholder also showing selected all.

[Feature] Keyboard support

Adding keyboard support should be easy enough to implement.

initialValue problem

Version 1.9.0

Here's what went wrong:

1. Put an initial array in prop value.
2. Next deselect an initial item gives an good onChange result. ( initial array minus 1 )
3. Reset
4. Put an initial array in prop value.
5. Select an new extra item gives a bad onChange result. ( only the selected item without initial array values )

Accessibility improvements

Should use correct aria and roles.

Selected values are not getting updated from outside of onChange event

Version

2.05.

Here's what went wrong:

<Picky
value={this.state.selectedModel}
onChange={this.handleModel}
multiple={true}

=> Select one value in picky
=> Update the state from outside function and assign the empty value. i.e, selectedModel = [];
=> Select another value in picky
=> See, Instead of one value is selected its getting two values selected

Should auto close single select on selecting a value

Version

1.4.1

Here's what went wrong:

It doesn't make sense to keep a single select open when selected a value.

Additional

Should add new prop "keepOpen" which will keep the dropdown open on selecting a value.

Select all comes true by default on multi-select

Version

1.9.1

Here's what went wrong:

Whatever multi-select I add the select all checkbox comes checked by default. I'm not sure if it is a bug or I'm doing something wrong. The example below illustrate the issue.

import React from 'react'
import Picky from 'react-picky'

class Select extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selected: null
    }
  }

  render () {
    return (
      <Picky
        multiple
        numberDisplayed={1}
        includeSelectAll
        includeFilter
        value={value}
        onChange={onChange}
        options={options}
        valueKey='value'
        labelKey='label'
        placeholder='Selecionar'
        selectAllText='Tudo'
        />
     )
  }
}

MutiSelect checkboxes clicking not working properly

Version

2.0.5

Here's what went wrong:

In MutiSelect, When I Click on any of checkbox it is hitting onChange two times. Due to this if I write an API calling in onChange method then it is firing two times. Instead of clicking on checkbox if I click on lable in <li> then it is working fine.

SelectAll method could be faster

Version

1.3.2

Here's what went wrong:

With a list of 100,000 items, the selectAll method could be much faster. No need for unneccessary map of options.

allSelected check does a sort too which slows things down considerably.

Did some basic performance.now checks.

allSelected check down from ~44ms to ~0.3ms

Support custom rendering if options with render props pattern

Use a Render Prop! by Michael Jackson

"Select all" checkbox is not checked when all the items are selected

Version

4.1.1

Here's what went wrong:

Initial state: There are 2 items in the list and select-all-checkbox, all the items are selected and select-all-checkbox is checked.

1. Unselect FIRST item, select-all-checkbox is unchecked. It is correct.
2. Select FIRST item again, select-all-checkbox is unchecked. It is incorrect - select-all-checkbox should be checked.

At selecting/unselecting the second (last) item, the select-all-checkbox works correctly.

I tried in the sandbox https://codesandbox.io/s/mmpq6z7lr8
with slice(0, 2) in the getCountries().

Additional callbacks

• onFiltered
• onOpen
• onClose