Form-related fixes, improvements and refactoring #4283
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This started out as a fix for #4268, but I got a bit carried away...
validateDOMNesting
error (<CommonLinkComponent>
already adds a<Link>
)forwardRef
error -<ReactDatePicker>
requires itscustomInput
to be "ref-able"RatingSystem
now returnsnull
rather thanundefined
when clearing the rating value - this fits better when using it as a form input, sincenull
represents clearing a value in GraphQL whereasundefined
represents not modifying the existing value.TextUtils.secondsToTimestamp()
to properly support inputs over 24 hours and negative inputs. SinceDurationUtils.secondsToString()
is functionally equivalent toTextUtils.secondsToTimestamp()
, I've removed the former and also movedDurationUtils.stringToSeconds()
intoTextUtils
to be able to removeDurationUtils
entirely.DurationInput
also now returnsnull
for the same reasons asRatingSystem
, and it can now properly handle negative inputs, due to the above improvements toTextUtils.secondsToTimestamp()
.DateInput
, to no longer acceptundefined
as a value. TheDateInput
component is basically just a thin wrapper around an<input>
, which should not have itsvalue
set toundefined
unless it is uncontrolled.src/utils
.<input>
-based components now have error messages displayed, and alignment and styling is more consistent across the different forms. The forms are also now much easier to use when on mobile: the inputs now always wrap so that the label is above the input on small screens, which allows the input to be wider.Fixes #4268