add max tags or checkbox limit request

[Thedineshk24]

there should be a prop called maxTagsLimit OR maxCheckbox limit should be available , currently there are no prop available in the library. so I was not able to restrict user to stop selecting checkbox.

EX: suppose I want user to select only 6 checkbox and after that disable other checkboxes but currently I'm not able to do it.

[mrchief]

You can do it via an HoC. Something like this would work:

• keep track of number of selections
• once the set limit is reached, the onChange handler becomes a no-op

[Thedineshk24]

can u please share some sample code for that, because I've tried to stop adding more data in onChange after limit is reached, but I'm still able to select more checkboxes

…

On Fri, Jun 17, 2022, 8:13 PM Hrusikesh Panda ***@***.***> wrote: You can do it via an HoC. Something like this would work: - keep track of number of selections - once the set limit is reached, the onChange handler becomes a no-op — Reply to this email directly, view it on GitHub <#567 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIAEXJ2PQKZNHCH5EVOEMZLVPSFHJANCNFSM5ZCGRV5Q> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[mrchief]

I can imagine something like this

maxCheckable = 5
maxChecked = 0

onChange {
  if maxChecked > maxCheckable {
    node.selected = false
    // update data
    // use tree node paths HoC for keeping track of state on your end
   setData(updatedData)
   return 
  }
  if node.selected == true; maxChecked++
  // update data but no need to do setData
}

[Thedineshk24]

node

Hi, I've tried your solution but it's not working. here is codesandboxlink
https://codesandbox.io/s/using-bootstrap-styles-with-react-dropdown-tree-select-forked-tmsw60?file=/index.js

[RivkindLeon]

Any way how I can limit showed tags? Something like to show first 2 tags, and for next just note how much( example: AUTO, BUS, +3) or at least show dots(...). If I have lots of selected tags my input components change size and this behavior not expected for me

[mrchief]

It should be doable with a bit of css - you can target :nth-child(n+2) nodes and hide them.