New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React 16 Warning: Received `true` for non-boolean attribute `unselectable`. #7798

Closed
violabg opened this Issue Oct 2, 2017 · 16 comments

Comments

Projects
None yet
@violabg

violabg commented Oct 2, 2017

Version

2.13.4

Environment

browser

Reproduction link

https://ant.design

Steps to reproduce

Upgrade to React 16 and use a TreeSelect with this properties:

const tProps = {
    multiple: true,
    treeData,
    treeCheckable: true,
    showCheckedStrategy: SHOW_PARENT,
    searchPlaceholder: "Select one or more Categories",
    filterTreeNode: filterCategories,
    allowClear: true
  };
  return (
    <TreeSelect
      className="search-panel-element"
      {...tProps}
      value={selectedCategories}
      onChange={onSelectCategory}
      getPopupContainer={triggerNode => triggerNode.parentNode}
    />
  );

What is expected?

no warnings

What is actually happening?

receiving warnings:

Warning: Received `true` for non-boolean attribute `unselectable`. If this is expected, cast the value to a string.
in ul (created by Tree)
in Tree (created by SelectTrigger)
in div (created by SelectTrigger)
in LazyRenderBox (created by PopupInner)
in div (created by PopupInner)
in PopupInner (created by Popup)
in Align (created by Popup)
in AnimateChild (created by Animate)
in Animate (created by Popup)
in div (created by Popup)
in Popup
@afc163

This comment has been minimized.

Member

afc163 commented Oct 2, 2017

Fixed in react-component/tree#131

@afc163 afc163 closed this Oct 2, 2017

@hengkx

This comment has been minimized.

Contributor

hengkx commented Jan 3, 2018

antd 3.1.0
react 16.2.0

warning still exists

@hengkx

This comment has been minimized.

Contributor

hengkx commented Jan 3, 2018

Warning: Received `true` for a non-boolean attribute `unselectable`.

If you want to write it to the DOM, pass a string instead: unselectable="true" or unselectable={value.toString()}.
    in ul (created by Tree)
    in Tree (created by SelectTrigger)
    in div (created by SelectTrigger)
    in LazyRenderBox (created by PopupInner)
    in div (created by PopupInner)
    in PopupInner (created by Popup)
    in Align (created by Popup)
    in AnimateChild (created by Animate)
    in Animate (created by Popup)
    in div (created by Popup)
    in Popup (created by Trigger)
    in Portal (created by Trigger)
    in Trigger (created by SelectTrigger)
    in SelectTrigger (created by Select)
    in Select (created by LocaleReceiver)
    in LocaleReceiver (created by TreeSelect)
    in TreeSelect (created by WriteBasicInfo)
    in div (created by FormItem)
    in div (created by Col)
    in Col (created by FormItem)
    in div (created by Row)
    in Row (created by FormItem)
    in FormItem (created by WriteBasicInfo)
    in div (created by WriteBasicInfo)
    in form (created by Form)
    in Form (created by WriteBasicInfo)
    in div (created by WriteBasicInfo)
    in WriteBasicInfo (created by Connect(WriteBasicInfo))
    in Connect(WriteBasicInfo) (created by Form(Connect(WriteBasicInfo)))
    in Form(Connect(WriteBasicInfo)) (created by ComponentCreate)
    in div (created by ComponentCreate)
    in div (created by ComponentCreate)
    in ComponentCreate (created by Dashboard)
    in div (created by Motion)
    in div (created by Motion)
    in Motion (created by Mortal)
    in Portal (created by Mortal)
    in Mortal (created by Panel)
    in Panel (created by Dashboard)
    in div (created by Dashboard)
    in Dashboard (created by Connect(Dashboard))
    in Connect(Dashboard) (created by Route)
    in Route (created by withRouter(Connect(Dashboard)))
    in withRouter(Connect(Dashboard)) (created by Route)
    in Route (created by Main)
    in Switch (created by Main)
    in div (created by Main)
    in Main (created by Route)
    in Route (created by withRouter(Main))
    in withRouter(Main) (created by Route)
    in Route
    in Switch
    in Router
    in Provider
    in Unknown
@hengkx

This comment has been minimized.

Contributor

hengkx commented Jan 3, 2018

antd use rc-tree ~1.7.0. but rc-tree 1.7.5 fixed.
Please upgrade rc-tree.
The local cached version is old.

@shahzeb1

This comment has been minimized.

shahzeb1 commented Jan 24, 2018

I'm still getting the same error but with <Checkbox />.

Is there a fix for this?

@lvlohammadi

This comment has been minimized.

lvlohammadi commented May 8, 2018

Same here for <Dropdown>.

  console.error node_modules/fbjs/lib/warning.js:33
    Warning: Received `false` for a non-boolean attribute `selectable`.

    If you want to write it to the DOM, pass a string instead: selectable="false" or selectable={value.toString()}.

    If you used to conditionally omit it with selectable={condition && value}, pass selectable={condition ? value : undefined} instead.
        in div (created by UserDetailDropDown)
        in LazyRenderBox (created by PopupInner)
        in div (created by PopupInner)
        in PopupInner (created by Popup)
        in Align (created by Popup)
        in AnimateChild (created by Animate)
        in Animate (created by Popup)
        in div (created by Popup)
        in Popup (created by Trigger)
        in Portal (created by Trigger)
        in Trigger (created by Dropdown)
        in Dropdown (created by Dropdown)
        in Dropdown (created by UserDetailDropDown)
        in span (created by UserDetailDropDown)
        in UserDetailDropDown (created by Route)
        in Route (created by withRouter(UserDetailDropDown))
        in withRouter(UserDetailDropDown) (created by Mutation)
        in Mutation (created by Apollo(withRouter(UserDetailDropDown)))
        in Apollo(withRouter(UserDetailDropDown)) (created by Query)
        in Query (created by Apollo(Apollo(withRouter(UserDetailDropDown))))
        in Apollo(Apollo(withRouter(UserDetailDropDown)))
        in Router
        in ApolloProvider (created by MockedProvider)
        in MockedProvider (created by MockedProvider)
        in MockedProvider (created by WrapperComponent)
        in WrapperComponent
@NgeKaworu

This comment has been minimized.

NgeKaworu commented May 11, 2018

<Select>


Warning: Received `true` for a non-boolean attribute `right`.

If you want to write it to the DOM, pass a string instead: right="true" or right={value.toString()}.
    in li (created by MenuItem)
    in MenuItem (created by Connect(MenuItem))
    in Connect(MenuItem) (created by MenuItem)
    in Trigger (created by Tooltip)
    in Tooltip (created by Tooltip)
    in Tooltip (created by MenuItem)
    in MenuItem (created by Header)
    in ul (created by DOMWrap)
    in DOMWrap (created by SubPopupMenu)
    in SubPopupMenu (created by Connect(SubPopupMenu))
    in Connect(SubPopupMenu) (created by Menu)
    in Provider (created by Menu)
    in Menu (created by Menu)
    in Menu (created by Header)
    in div (created by Col)
    in Col (created by Header)
    in div (created by Row)
    in Row (created by Header)
    in Header (created by Connect(Header))
    in Connect(Header) (created by Layout)
    in div (created by Layout)
    in LocaleProvider (created by Layout)
    in Layout (created by Route)
    in Route (created by withRouter(Layout))
    in withRouter(Layout) (created by Route)
    in Route (created by Route)
    in Switch (created by Route)
    in Route
    in Router (created by ConnectedRouter)
    in ConnectedRouter
    in Unknown
    in Provider (created by DvaContainer)
    in DvaContainer

@hernimen

This comment has been minimized.

hernimen commented Jun 5, 2018

same in table

@afc163

This comment has been minimized.

Member

afc163 commented Jun 6, 2018

Please create new issue with reproducible codesandbox if you guys meet same problem.

@lvlohammadi

This comment has been minimized.

lvlohammadi commented Jun 6, 2018

@afc163 It seems we encountered this error because of this line (https://github.com/ant-design/ant-design/blob/master/components/dropdown/dropdown.tsx#L65).

menu cannot be selectable in dropdown defaultly

So if someone puts menu inside a div, It will break down.
I think that's the same problem for rest of the guys.
Sorry to go on this issue.

afc163 added a commit that referenced this issue Jun 22, 2018

bors bot added a commit to mozilla/delivery-console that referenced this issue Jun 25, 2018

Merge #239
239: Update dependency antd to v3.6.4 r=magopian a=renovate[bot]

This Pull Request updates dependency [antd](https://github.com/ant-design/ant-design) from `v3.6.3` to `v3.6.4`



<details>
<summary>Release Notes</summary>

### [`v3.6.4`](https://github.com/ant-design/ant-design/releases/3.6.4)
[Compare Source](ant-design/ant-design@3.6.3...3.6.4)
- 🐞 Fixed `Steps` theme `@process-icon-color`. [#&#8203;10973](`ant-design/ant-design#10973)
- 🐞 Fixed style of RangePicker with preset ranges. [#&#8203;10986](`ant-design/ant-design#10986)
- 🐞 Fixed `Dropdown` non-boolean attribute warning. [#&#8203;7798](`ant-design/ant-design#7798)
- TypeScript
  - 🌟 Add `Tree` prop `className` definition. [#&#8203;10950](`ant-design/ant-design#10950)
  - 🌟 Add `Tree` prop `selectable` definition. [3fb478e](ant-design/ant-design@3fb478e)


---


- 🐞 修复 `Steps` 组件的 `@process-icon-color` 样式定义。[#&#8203;10973](`ant-design/ant-design#10973)
- 🐞 修复 `RangePicker` 组件使用预置范围时的样式问题。[#&#8203;10986]
(`ant-design/ant-design#10986)
- 🐞 修复 `Dropdown` 组件可能报出的 `non-boolean attribute` 的警告。[#&#8203;7798](`ant-design/ant-design#7798)
- TypeScript
  - 🌟 给 `Tree` 组件添加 `className` 的定义。[#&#8203;10950](`ant-design/ant-design#10950)
  - 🌟 给 `Tree` 组件添加 `selectable` 的定义。[3fb478e](ant-design/ant-design@3fb478e)

---

</details>




---

This PR has been generated by [Renovate Bot](https://renovatebot.com).

Co-authored-by: Renovate Bot <bot@renovateapp.com>
@FgoPan

This comment has been minimized.

FgoPan commented Aug 27, 2018

any solution?

@leckman

This comment has been minimized.

leckman commented Sep 12, 2018

Also having this problem with Buttons inside a Popover: https://codesandbox.io/s/92ym2k9xrw?module=%2Fsrc%2Findex.js

screen shot 2018-09-12 at 11 40 46 am

@zombieJ

This comment has been minimized.

Member

zombieJ commented Sep 13, 2018

@leckman

This comment has been minimized.

leckman commented Sep 13, 2018

@zombieJ I understand that the block prop is causing the error, however it is listed as a supported property in the documentation and I specifically want to use it in this case. I reported the issue here because the block property is not working as described/expected and the error seems similar to those above, but if this is outside the scope of the original ticket I'm happy to file a separate issue.

@zombieJ

This comment has been minimized.

Member

zombieJ commented Sep 14, 2018

@leckman , block not exist in antd@3.5.2: https://codesandbox.io/s/v3j5lnxrn3

@tiarebalbi

This comment has been minimized.

tiarebalbi commented Sep 20, 2018

This is a known issue on styled-components/styled-components#1198
@leckman as workaround for now, you can do something similar to:
<Button key={index} block="true"> {item} </Button>

https://codesandbox.io/s/9lkllmz2k4

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment