Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Date picker access in contenteditable elements #8335

Open
OvidijusParsiunas opened this issue Sep 29, 2022 · 8 comments
Open

Date picker access in contenteditable elements #8335

OvidijusParsiunas opened this issue Sep 29, 2022 · 8 comments
Labels
addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest

Comments

@OvidijusParsiunas
Copy link

The datepicker API is currently only accessible via the HTMLInputElement. In some cases, developers need to use the contenteditable attribute to allow user input for alternative element types such as the HTMLDivElement, however datepicker is unfortunately not accessible to them.

The ability for developers to access a cross-platform capable, unified design date picker without having to download a third-party library is extremely powerful. I utmost understand that such a feat does not come without having to deal with 100s of different use-cases and the issues that come with each one, but I wanted to ask if facilitating the access of its API for the contenteditable elements was anywhere on your roadmap as this is an issue that I am facing upfront and I believe other devs will run into this use-case in the future as well.
@OvidijusParsiunas OvidijusParsiunas changed the title Possibility of allowing date picker to be accessed in contenteditable elements Date picker access in contenteditable elements Sep 29, 2022
@AndriusCTR

This comment was marked as spam.

Sign in to view
@annevk annevk added addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest labels Nov 7, 2023
@annevk
Copy link
Member

annevk commented Nov 7, 2023

This might be what showPicker() can offer at some point in the future, but it would need some more work.

cc @lukewarlow

@lukewarlow
Copy link
Member

See also openui/open-ui#922

@saschanaz
Copy link
Member

saschanaz commented Nov 20, 2023 •
edited
Loading

There's an awkward workaround with showPicker which requires DOM manipulation:

<!DOCTYPE html>
<meta charset="utf-8" />
<div contenteditable id="target">foo</div>
<script>
  // Open date picker when pressing number keys at the current cursor
  // And insert the date when picked
  target.onkeydown = (ev) => {
    if (!isNaN(parseInt(ev.key))) {
      ev.preventDefault();
      const input = document.createElement("input");
      input.type = "date";
      input.style = "width: 0px; height: 0px; visibility: hidden";
      const range = getSelection().getRangeAt(0);
      range.insertNode(input);
      input.showPicker();
      input.onchange = () => {
        input.remove();
        range.insertNode(new Text(input.value));
      };
      input.oncancel = () => input.remove();
    }
  };
</script>

The date picker appears within contenteditable

Edit: oncancel doesn't work either on Firefox Nightly nor Chrome canary, but it should, right? 🤔

@OvidijusParsiunas
Copy link
Author

I pretty much had to use a similar workaround where the click/focus on a content editable element would trigger the input element's picker:

if (Browser.IS_SAFARI) {
  inputElement.dispatchEvent(new MouseEvent('click'));
} else {
  inputElement.showPicker();
}

Full code - Link
Live project - Link

@lukewarlow
Copy link
Member

Edit: oncancel doesn't work either on Firefox Nightly nor Chrome canary, but it should, right? 🤔

That only fires for file inputs.

@lukewarlow lukewarlow mentioned this issue Nov 20, 2023
Open
@saschanaz
Copy link
Member

That only fires for file inputs.

Oh right, thanks. Do we know it's missed somehow or is it intentional to not fire it for other pickers?

@lukewarlow
Copy link
Member

Currently the idea is that pickers shouldn't be observable because not all browsers use them for every input on every computer (desktop Vs mobile) so they don't want authors relying on that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addition/proposal New features or enhancements needs implementer interest Moving the issue forward requires implementers to express interest
Milestone
No milestone
Development

No branches or pull requests
5 participants
@annevk @saschanaz @OvidijusParsiunas @AndriusCTR @lukewarlow