hospitalrun icon indicating copy to clipboard operation
hospitalrun copied to clipboard

Inconsistent API for input elements

Open MatthewDorner opened this issue 4 years ago • 4 comments

🐛 Bug Report

There are some form input components that have inconsistent props or missing capabilities. For instance, Checkbox has no way to set the initial value. I tried looking at the react-bootstrap docs and actually didn't see a way to set it there either, but there must be one. Because of this, Edit Patient doesn't populate the checkbox in GeneralInformation with its correct initial value. Checkbox also uses disabled instead of isEditable which is inconsistent with the other components.

Also, Typeahead doesn't have a way to disable the input. This caused the need to conditionally render either Typeahead or TextInputWithLabelFormGroup in the AppointmentDetailsForm component, which should be able to be done with a single component.

Neither Typeahead nor Checkbox currently use wrapper components in the frontend in the way TextInputWithLabelFormGroup and others do, though I'm not sure if they are needed.

Expected behavior

The various input elements should have a consistent API, at least to disable the input and populate the initial value.

MatthewDorner avatar Feb 20 '20 00:02 MatthewDorner

@MatthewDorner This is a good find. I see a few issues that can come out of this so they can be put in their respective repos.

At first glance there should be an issue for the following:

  • Adding the ability to have a disabled Typeahead component (components repo)
  • Ability to set a default value for a checkbox (components repo)
  • Change disabled to isEditable for checkbox (components repo, breaking change)

jackcmeyer avatar Feb 20 '20 01:02 jackcmeyer

The reason that some fields have wrapper components is to simplify (and not duplicate) the logic for creating a form group (which allows labels to be connected to fields).

However, maybe these components are "primitive" enough (similar to just a plain textbox) that they should be moved to the components repo.

I know there is https://github.com/HospitalRun/components/issues/66 which is to add validation styling, which requires form groups, I believe, which could break the wrapper components.

jackcmeyer avatar Feb 20 '20 01:02 jackcmeyer

The wrapper components are relevant because in components repo, everything uses disabled, while everything in the frontend uses isEditable. So by adding isEditable to those unwrapped components it makes them inconsistent with the other elements in components repo etc. We should probably just make it the same across repos.

MatthewDorner avatar Feb 20 '20 17:02 MatthewDorner

Really a good call! +1 to this

fox1t avatar Feb 20 '20 20:02 fox1t