Support a way to use your components without "Tether"

[quantizor]

Sometimes you just want to render a date picker in-place...

[majapw]

Can you describe what problems the tethering is causing for you exactly? The idea was to replicate the previous behavior but with the enhanced responsiveness that comes with tethering. If it broke behavior for you, it'd be good to know how.

[quantizor]

If you are rendering a picker component inside another that is portalled in a way similar to the Tether component, it's difficult to do event detection via bubbling, etc.

Like for instance, if I wanted to use the date picker inside a popover component of my own design. I'd rather have it render in-place so it doesn't interfere with my outside click detection.

[ljharb]

React components are supposed to be self-contained - I wouldn't think you'd want to rely on events bubbling out of a React component anyways.

Your outside click detection would be most robust if it used the contains API, on the ref for the datepicker, to see if it's an inside click - that way it wouldn't matter how the HTML was structured.

[quantizor]

@ljharb I do in fact use that method, however if one of the inner children does not actually render inside the tree like Tether does, then contains is useless.

[quantizor]

Trust me, I've done the research on this and developed my own way of dealing with it for the time being. However, it would be better to simply offer a method of using the component without the tether. For example, sometimes form designs do not need the input field to actually be visible and the date picker lives by itself, adjusting a hidden input.

[ljharb]

I'm in complete agreement that there should be a way to use it without tethering :-) i just don't think the use case should be "event bubbling".

[quantizor]

For example, sometimes form designs do not need the input field to actually be visible and the date picker lives by itself, adjusting a hidden input.

There you go. In that situation, you'd want to render in-place since it technically doesn't have anything specific to "tether" to.

[thomasthesecond]

Another case that I can describe is one that I'm currently experiencing, and that is using the DateRangePicker component inside of another Tether component. In the mobile view of our app, our filter controls (which includes the date picker) render in a pop-over/modal style panel, which is tethered. In this case, I think it would be nice to have the option.

[majapw]

Oh yeah, I am in fact running into this now when rendering the datepicker in a modal and it is gross. I was wondering if maybe being able to indicate the DOM element the tether attaches itself to might be sufficient? I really don't want to lose the responsiveness associated with the tether, but I think that maybe allowing the tether parent to be something other than the body might help (also with z-index issues).

[quantizor]

That doesn't help if you want the picker to take up space and affect the layout of surrounding content.

[majapw]

To be fair, the implementation before the tether did not do that either, but I guess you were able to do it more easily in that case with CSS overrides on the DateRangePicker__picker class. I think for that usecase, I was imagining that people would use the DayPicker directly (because do you even want inputs in that situation?)

[quantizor]

That's what we ended up doing... It works well enough, just felt like a hack to me to delve into your module tree.

[majapw]

Yeah so the tether was a failed experiment. It has been ripped out as of v4.0.0

[quantizor]

Thanks for your time and effort here. Much appreciated 👍

[neekey]

Hi @majapw

To be fair, the implementation before the tether did not do that either, but I guess you were able to do it more easily in that case with CSS overrides on the DateRangePicker__picker class. I think for that usecase, I was imagining that people would use the DayPicker directly (because do you even want inputs in that situation?)

I think I kind of runing into the same situation that I just want to use the datePicker directly, and just want to get rid of the two inputs (not sure if they are the "Tether" you were talking about, so I post a screenshot here to make it clear):

The reason I can't just use the DayPicker directly is that I need the functionality of picking date range.

My case is like:

I get a date range dropdown, and when the "custom range" is clicked, I want to show the dateRangePicker:

..

I'm using 4.1.1, but I can't find a way to use the dateRangePicker alone without the "Tether".

[majapw]

@neekey I don't quite know what you mean by tether. The tether we're talking about on this issue is a specific dependency that modified the DOM structure of the component and allowed for easy responsiveness. It has been removed totally (and so your question doesn't make very much sense to me) and replaced with something simpler.

It seems like what you actually mean is that you want to have all the logic set up for you but not use the built in inputs associated with the DateRangePicker. I'd recommend taking this conversation over to #204 (comment)

[neekey]

@majapw Thanks for clarifying the situation haha...my mistake. Will move to that issue