Cannot change date inside Form Component:DatePicker

[kbardi]

Version

3.2.1

Environment

Google Chrome Version 64.0.3282.186 (64 bit),
Mac OS High Sierra Version 10.13.3,
React Version 16.2.0

Reproduction link

https://codesandbox.io/s/43zrxlz45w

Steps to reproduce

Add a DatePicker as a Form.Item inside a Form. When you try to select a year, a Month o a Date, it doesn't change anything, neither throw any error.

What is expected?

To change date from DatePicker inside a Form.

What is actually happening?

Nothing change after selecting month, year or date.

[kbardi]

@yesmeck For some reason it's working in the example, but when I created it had same error I have. I can select a Date, but I cannot change month or year. It's a problem that occurs in the whole platform when the DatePicker is inside a Form.Item.

[yesmeck]

Reinstall node_moduels, if the problem still exists, provide a reproduction repo.

[ant-design-bot]

This issue is closed because it has been marked as Need Reproduce, but has not had recent activity.
If you can provide a reproduce, feel free to ping anyone of our maintainers to reopen this issue.
Thank you for your contributions.

[kbardi]

@yesmeck I've been testing DatePicker in different versions of ant design, and I found my problem occurs if I use antd version higher than 3.1.5. If I use antd version 3.1.4 it works correctly.

Maybe it's related with a change you've done on #8885 on version 3.1.5

or this one for RangePicker #8970 on version 3.1.5 too.

I'm using react-intl for translation, and my package.json is:

{
  "name": "project",
  "version": "0.0.1",
  "description": "An out-of-box platform for business management",
  "private": true,
  "scripts": {
    "precommit": "npm run sort-json && npm run lint-staged",
    "start": "roadhog server",
    "start:no-proxy": "cross-env API_ENV=development roadhog server --debug",
    "start:staging-proxy": "cross-env API_ENV=staging roadhog server --debug",
    "build:local": "cross-env API_ENV=development roadhog build",
    "build:staging": "cross-env API_ENV=staging roadhog build",
    "build:production": "cross-env API_ENV=production roadhog build",
    "site": "roadhog-api-doc static && gh-pages -d dist",
    "analyze": "roadhog build --analyze",
    "lint:style": "stylelint \"src/**/*.less\" --syntax less",
    "lint": "eslint --ext .js src mock tests && npm run lint:style",
    "lint:fix": "eslint --fix --ext .js src mock tests && npm run lint:style",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js",
    "test": "jest",
    "test:all": "node ./tests/run-tests.js",
    "fix:eslint": "eslint --fix --ext .js mock",
    "sort-json": "jsonsort 'src/locales/*.json'"
  },
  "dependencies": {
    "ant-design-pro": "^1.1.0",
    "antd": "3.1.4",
    "babel-runtime": "^6.9.2",
    "bizcharts": "^3.1.3",
    "classnames": "^2.2.5",
    "core-js": "^2.5.1",
    "dva": "^2.0.3",
    "flat": "^4.0.0",
    "js-search": "^1.4.2",
    "json-sort-cli": "^1.2.2",
    "lodash": "^4.17.5",
    "lodash-decorators": "^4.4.1",
    "lodash.clonedeep": "^4.5.0",
    "moment": "^2.21.0",
    "numeral": "^2.0.6",
    "prop-types": "^15.6.1",
    "qs": "^6.5.0",
    "query-string": "^5.1.1",
    "react": "^16.2.0",
    "react-container-query": "^0.9.1",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.2.0",
    "react-fittext": "^1.0.0",
    "react-google-maps": "^9.4.5",
    "react-intercom": "^1.0.14",
    "react-intl": "^2.4.0",
    "react-scroll-to-component": "^1.0.2",
    "recompose": "^0.26.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-jest": "^22.4.0",
    "babel-plugin-dva-hmr": "^0.3.2",
    "babel-plugin-import": "^1.6.6",
    "babel-plugin-react-intl": "^2.4.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-inline-environment-variables": "^0.3.0",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.4",
    "cross-port-killer": "^1.0.1",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "eslint": "^4.18.2",
    "eslint-config-airbnb": "^16.0.0",
    "eslint-plugin-babel": "^4.0.0",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jsx-a11y": "^6.0.0",
    "eslint-plugin-markdown": "^1.0.0-beta.7",
    "eslint-plugin-react": "^7.7.0",
    "gh-pages": "^1.0.0",
    "husky": "^0.14.3",
    "jest": "^22.4.0",
    "jsdom": "^11.6.2",
    "lint-staged": "^4.3.0",
    "mockjs": "^1.0.1-beta3",
    "pro-download": "^1.0.0",
    "react-test-renderer": "^16.0.0",
    "redbox-react": "^1.3.2",
    "roadhog": "^1.3.1",
    "roadhog-api-doc": "^0.2.11",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^17.0.0"
  },
  "optionalDependencies": {
    "nightmare": "^2.10.0"
  },
  "babel": {
    "presets": [
      "env",
      "react"
    ],
    "plugins": [
      "transform-decorators-legacy",
      "transform-class-properties"
    ]
  },
  "jest": {
    "setupFiles": [
      "<rootDir>/tests/setupTests.js"
    ],
    "testMatch": [
      "**/?(*.)(spec|test).js?(x)"
    ],
    "setupTestFrameworkScriptFile": "<rootDir>/tests/jasmine.js",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleNameMapper": {
      "\\.(css|less)$": "<rootDir>/tests/styleMock.js",
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/jest/assetsTransformer.js"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx}": "lint-staged:js",
    "**/*.less": "stylelint --syntax less"
  }
}

Cheers,

[yesmeck]

Please, help us reproduce it.

[erhsparks]

I'm having the same issue and but only in a very specific case: when the DatePicker is controlled by value/defaultValue/onClick and is mounted in a row of a Table with expandRowByClick specified (my app actually has a custom-built version of expandRowByClick because it was written prior to 3.0 but since this bug is reproducible with the new flag, I use that in the code sandbox below for simplicity's sake).

I found that the solution was to stop the click event propagation to the Table row, but I'm not entirely sure why that worked, so I'd love it if you guys could investigate. Maybe something to do with the click causing the row to call setState on Table and re-render?

Here's a repro example with a few simple cases showing the month/year arrows either not working or working depending on a) if the Table is click-to-expand and b) if the click event propagation is stopped at the DatePicker level: https://codesandbox.io/s/xpv55r34yp

What's bizarre is that in my actual app, the DatePicker is in a Modal mounted in a Menu (which is the overlay to a Dropdown wrapping a trigger Button -- one of the options in that menu mounts a scheduler modal with the DatePicker in it), and I've already wrapped the entire component in a div which stops event propagation on click so that clicks on the Button, Menu and its Items, and Modal don't expand and collapse the row. However, the DatePicker's month and year arrows are unresponsive until I wrap it in a div which stops propagation on click. Very mysterious!

[yesmeck]

@erhsparks We use React.createPortal to create the DatePicker popup, and React.createPortal will bubble events to the parent tree.

[erhsparks]

makes sense, thanks!

[ghost]

I use antd 2.13.11 ,RanderPicker also cannot change month or year. When I use it with Form, or set Value to it. Please help me