-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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
Manage required attribute on date range inputs #781
base: main
Are you sure you want to change the base?
Conversation
55dfb72
to
a60f9dc
Compare
I'm not sure the user would know how to back out of this situation if they accidentally type into the start field and later decide not to submit a range. |
@taylor-steve Why not push this upstream into the blacklight-range-limit plugin rather than doing this change locally? |
|
||
export default class extends Controller { | ||
connect() { | ||
this.beginInput = this.element.querySelector('input[name="range[date_range][begin]"]'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you use a stimulus target here rather than doing a querySelector?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found this preferable to monkey-patching or subclassing RangeFormComponent to get at render_range_input to add the data target. Unless there's an easier way I'm missing?
export default class extends Controller { | ||
connect() { | ||
this.beginInput = this.element.querySelector('input[name="range[date_range][begin]"]'); | ||
this.endInput = this.element.querySelector('input[name="range[date_range][end]"]'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you use a stimulus target here rather than doing a querySelector?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found this preferable to monkey-patching or subclassing RangeFormComponent to get at render_range_input to add the data target. Unless there's an easier way I'm missing?
this.endInput.addEventListener('input', event => this.updateInputRequiredState(event)); | ||
} | ||
|
||
updateInputRequiredState(event) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why don't we just set both fields to required statically?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I want to maintain the user's current ability to reset the date range search by blanking out both sides of the range. You're correct in that my logic could be consolidated though, thanks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I hadn't considered that. Can you add a comment about that use case here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good idea. I added a comment and a note to check the template because it's only overridden to set the data target. I think it's likely this code gets removed as a result of the production WC.
a60f9dc
to
b391eb8
Compare
b391eb8
to
dd85d5f
Compare
Fixes #739.
Manages the required attribute for the inputs so the user is prompted when trying to submit an unbalanced range.