tutorbook icon indicating copy to clipboard operation
tutorbook copied to clipboard

Remove pre-filled workaround for notch styling

Open nicholaschiang opened this issue 5 years ago • 2 comments
trafficstars

Right now (in @tutorbook/subject-select), I'm using a this.state.inputValueWorkaround field to ensure that the input value contains a non-breaking space (i.e. &nsbp; or \xa0) whenever there are subjects selected (i.e. when there are chips within the TextField).

Workaround below (in src/subject-select/lib/subject-select.tsx on line 87):

  /**
   * Workaround for styling the input as if it has content. If there are 
   * subjects selected (in the given `subjects` object), this will return a
   * string containing a space (`' '`) so that the `TextField` styles itself as
   * if it were filled.
   * @todo Ideally, remove this workaround. But instead, make the `&nsbp;` 
   * actually show up as a non-breaking space (i.e. nothing).
   * @see {@link https://github.com/jamesmfriedman/rmwc/issues/601}
   * @return {string} The input value (either `' '` or `''`).
   */
  getInputValue(
    subjects: { [subject: string]: boolean } = this.state.subjects,
  ): string {
    const selected = Object.values(subjects).reduce((a, b) => a || b, false);
    return selected ? '\xa0' : '';
  }

See this issue and this issue for more info on how I went about implementing our SubjectSelect component.

nicholaschiang avatar Apr 06 '20 19:04 nicholaschiang

Fixed it but there's still a bug in @rmwc/textfield that we're waiting on.

See this issue.

nicholaschiang avatar May 20 '20 03:05 nicholaschiang

This will stay open until these two issues are resolved by @jamesmfriedman:

nicholaschiang avatar May 21 '20 16:05 nicholaschiang