Ant-design-mobile: Modal cannot input anything

Created on 25 Jan 2018  ยท  8Comments  ยท  Source: ant-design/ant-design-mobile


https://mobile.ant.design/components/modal-cn/, "promise" and "defaultValue" cases
antd-mobile version: 2.1.4
When call Modal.prompt() which type is "default"

bug

Most helpful comment

hi, guys, I met the same problem as yours, which I can't input more than two characters to Modal.promt ,and none of inputed characters were shown in the input zone.

Win10 ,chrome version: 63.0.3239.84 x64

"dependencies": {
    "antd-mobile": "^2.1.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.13.0"
  },

For a minimal reproduce case at CodePen :

const { Tabs, WhiteSpace, Badge, Modal, Button} = window["antd-mobile"];
const TabExample = () => (
  <div>
    <WhiteSpace />
    <Button onClick={() => Modal.prompt('้กต้ข่ทณ่ฝฌ', '',[{text: 'Cancel'},
                        {text: 'Submit',
                            onPress: (value: any) => new Promise((resolve) => {
                                console.log(`jump:${value}`);
                                resolve();
                            }),
                        },
                    ], 'default', '', ['่ฆๅŽปๅ“ชไธ€้กตๅ‘ข'])}>Go</Button>
  </div>
);

ReactDOM.render(<TabExample />, mountNode);

And this is the local package dependencies, seems no differences with 2.1.3 :

โ”œโ”€ [email protected]
โ”‚  โ”œโ”€ array-tree-filter@~2.0.0
โ”‚  โ”œโ”€ [email protected]
โ”‚  โ”œโ”€ classnames@^2.2.1
โ”‚  โ”œโ”€ normalize.css@^7.0.0
โ”‚  โ”œโ”€ rc-checkbox@~2.0.0
โ”‚  โ”œโ”€ rc-collapse@~1.7.0
โ”‚  โ”œโ”€ rc-drawer@~0.4.9
โ”‚  โ”œโ”€ rc-slider@~8.2.0
โ”‚  โ”œโ”€ rc-swipeout@~2.0.0
โ”‚  โ”œโ”€ rmc-calendar@^1.0.0
โ”‚  โ”œโ”€ rmc-cascader@~5.0.0
โ”‚  โ”œโ”€ rmc-date-picker@~6.0.0
โ”‚  โ”œโ”€ rmc-dialog@^1.0.1
โ”‚  โ”œโ”€ rmc-feedback@^1.0.0
โ”‚  โ”œโ”€ rmc-input-number@^1.0.0
โ”‚  โ”œโ”€ rmc-list-view@^0.11.0
โ”‚  โ”œโ”€ rmc-notification@~1.0.0
โ”‚  โ”œโ”€ rmc-nuka-carousel@~3.0.0
โ”‚  โ”œโ”€ rmc-picker@~5.0.0
โ”‚  โ”œโ”€ rmc-pull-to-refresh@~1.0.1
โ”‚  โ”œโ”€ rmc-steps@~1.0.0
โ”‚  โ”œโ”€ rmc-tabs@~1.2.0
โ”‚  โ”œโ”€ rmc-tooltip@~1.0.0
โ”‚  โ””โ”€ rn-topview@^0.1.6

When I downgrade to version 2.1.3, the problem just gone.

All 8 comments

ref #2177

@handsomeceleste What do you mean about cannot input anything? maybe same as #2177 ?

Hello @handsomeceleste. Please provide a re-producible demo: https://codepen.io/pen?template=LWpaKe&editors=0010

@paranoidjk I have test the "Modal.prompt()" demo under my MAC browser (Safari & Chrome), but I cannot input anything by keyboard, the value of input widget always be the last character what I inputed.
However, Under Windows, It works well, I'm not sure whether the problem is the "cursor focus" you mentioned before or not.

hi, guys, I met the same problem as yours, which I can't input more than two characters to Modal.promt ,and none of inputed characters were shown in the input zone.

Win10 ,chrome version: 63.0.3239.84 x64

"dependencies": {
    "antd-mobile": "^2.1.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts-ts": "2.13.0"
  },

For a minimal reproduce case at CodePen :

const { Tabs, WhiteSpace, Badge, Modal, Button} = window["antd-mobile"];
const TabExample = () => (
  <div>
    <WhiteSpace />
    <Button onClick={() => Modal.prompt('้กต้ข่ทณ่ฝฌ', '',[{text: 'Cancel'},
                        {text: 'Submit',
                            onPress: (value: any) => new Promise((resolve) => {
                                console.log(`jump:${value}`);
                                resolve();
                            }),
                        },
                    ], 'default', '', ['่ฆๅŽปๅ“ชไธ€้กตๅ‘ข'])}>Go</Button>
  </div>
);

ReactDOM.render(<TabExample />, mountNode);

And this is the local package dependencies, seems no differences with 2.1.3 :

โ”œโ”€ [email protected]
โ”‚  โ”œโ”€ array-tree-filter@~2.0.0
โ”‚  โ”œโ”€ [email protected]
โ”‚  โ”œโ”€ classnames@^2.2.1
โ”‚  โ”œโ”€ normalize.css@^7.0.0
โ”‚  โ”œโ”€ rc-checkbox@~2.0.0
โ”‚  โ”œโ”€ rc-collapse@~1.7.0
โ”‚  โ”œโ”€ rc-drawer@~0.4.9
โ”‚  โ”œโ”€ rc-slider@~8.2.0
โ”‚  โ”œโ”€ rc-swipeout@~2.0.0
โ”‚  โ”œโ”€ rmc-calendar@^1.0.0
โ”‚  โ”œโ”€ rmc-cascader@~5.0.0
โ”‚  โ”œโ”€ rmc-date-picker@~6.0.0
โ”‚  โ”œโ”€ rmc-dialog@^1.0.1
โ”‚  โ”œโ”€ rmc-feedback@^1.0.0
โ”‚  โ”œโ”€ rmc-input-number@^1.0.0
โ”‚  โ”œโ”€ rmc-list-view@^0.11.0
โ”‚  โ”œโ”€ rmc-notification@~1.0.0
โ”‚  โ”œโ”€ rmc-nuka-carousel@~3.0.0
โ”‚  โ”œโ”€ rmc-picker@~5.0.0
โ”‚  โ”œโ”€ rmc-pull-to-refresh@~1.0.1
โ”‚  โ”œโ”€ rmc-steps@~1.0.0
โ”‚  โ”œโ”€ rmc-tabs@~1.2.0
โ”‚  โ”œโ”€ rmc-tooltip@~1.0.0
โ”‚  โ””โ”€ rn-topview@^0.1.6

When I downgrade to version 2.1.3, the problem just gone.

I meet the same problem this is demo adress https://codepen.io/djlxiaoshi/pen/PQwNJN

@6769 This is indeed a problem in the new version.

Was this page helpful?
0 / 5 - 0 ratings