How to access onKeyDown handler of material-ui-pickers datepicker keyboard icon?
I have a Material table with rows with material-ui-pickers datepicker components in the last column.
I need to add a new row to the table on tab key press when the focus is on datepicker keyboard icon. For this I think it is needed to access onKeyDown handler of datepicker keyboard icon.
How to access
onKeyDownhandler of datepicker keyboard icon?
I have added an issue to the material-ui-pickers git repo regarding this.
I tried to adding the onKeyDown handler to the DatePicker component. But it will cause to add a new row in both occasions, first tab key press while the focus is on date string and second tab key press while the focus is on the icon.
<DatePicker
id=id
keyboard
...
onKeyDown=(e, index) =>
if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index)
console.log('Tab key pressed');
this.props.addNewItemDataRow();
/>
reactjs datepicker material-ui onkeydown material-ui-pickers
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
add a comment |
I have a Material table with rows with material-ui-pickers datepicker components in the last column.
I need to add a new row to the table on tab key press when the focus is on datepicker keyboard icon. For this I think it is needed to access onKeyDown handler of datepicker keyboard icon.
How to access
onKeyDownhandler of datepicker keyboard icon?
I have added an issue to the material-ui-pickers git repo regarding this.
I tried to adding the onKeyDown handler to the DatePicker component. But it will cause to add a new row in both occasions, first tab key press while the focus is on date string and second tab key press while the focus is on the icon.
<DatePicker
id=id
keyboard
...
onKeyDown=(e, index) =>
if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index)
console.log('Tab key pressed');
this.props.addNewItemDataRow();
/>
reactjs datepicker material-ui onkeydown material-ui-pickers
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
add a comment |
I have a Material table with rows with material-ui-pickers datepicker components in the last column.
I need to add a new row to the table on tab key press when the focus is on datepicker keyboard icon. For this I think it is needed to access onKeyDown handler of datepicker keyboard icon.
How to access
onKeyDownhandler of datepicker keyboard icon?
I have added an issue to the material-ui-pickers git repo regarding this.
I tried to adding the onKeyDown handler to the DatePicker component. But it will cause to add a new row in both occasions, first tab key press while the focus is on date string and second tab key press while the focus is on the icon.
<DatePicker
id=id
keyboard
...
onKeyDown=(e, index) =>
if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index)
console.log('Tab key pressed');
this.props.addNewItemDataRow();
/>
reactjs datepicker material-ui onkeydown material-ui-pickers
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
I have a Material table with rows with material-ui-pickers datepicker components in the last column.
I need to add a new row to the table on tab key press when the focus is on datepicker keyboard icon. For this I think it is needed to access onKeyDown handler of datepicker keyboard icon.
How to access
onKeyDownhandler of datepicker keyboard icon?
I have added an issue to the material-ui-pickers git repo regarding this.
I tried to adding the onKeyDown handler to the DatePicker component. But it will cause to add a new row in both occasions, first tab key press while the focus is on date string and second tab key press while the focus is on the icon.
<DatePicker
id=id
keyboard
...
onKeyDown=(e, index) =>
if (e.keyCode === 9 && this.props.itemData.rows.length - 1 === index)
console.log('Tab key pressed');
this.props.addNewItemDataRow();
/>
reactjs datepicker material-ui onkeydown material-ui-pickers
reactjs datepicker material-ui onkeydown material-ui-pickers
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
asked Nov 13 '18 at 10:38
Shanika EdiriweeraShanika Ediriweera
151215
151215
add a comment |
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279158%2fhow-to-access-onkeydown-handler-of-material-ui-pickers-datepicker-keyboard-icon%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53279158%2fhow-to-access-onkeydown-handler-of-material-ui-pickers-datepicker-keyboard-icon%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
