Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

colors: add support for null or undefined values #11672

@alirezamirian

Description

@alirezamirian
Contributor

Bug or maybe enhancement request:

md-colors directive throws error when property values evaluate to null or undefined.
Handling null or undefined is particularly useful when expression is controlled by some nullable user input.

Currently it not logs an error in the console, but also fails to correctly clean previous styles when going from some value to undefined or null.

CodePen and steps to reproduce the issue:

CodePen Demo which demonstrates the issue:

Detailed Reproduction Steps:

  1. Select a color from color selection control
  2. Select none

What is the expected behavior?

md-colors should gracefully handle null or undefined. It should not log error in the console, and also it should clean previous styles when going from a valid color to null/undefined

What is the current behavior?

It logs lots of errors in the console and doesn't clean previous styles properly.

What is the use-case or motivation for changing an existing behavior?

All use cases when values are not static strings and are dynamically evaluated and can may be nullable.

Which versions of AngularJS, Material, OS, and browsers are affected?

  • AngularJS: any (not relevant)
  • AngularJS Material: 1.1.13 (latest at the time)
  • OS: any
  • Browsers: any

Is there anything else we should know? Stack Traces, Screenshots, etc.

No

Activity

self-assigned this
on Mar 13, 2019
added this to the 1.1.14 milestone on Mar 13, 2019
Splaktar

Splaktar commented on Mar 13, 2019

@Splaktar
Contributor

OK, in the CodePen demo I see "Cannot read property 'split' of null" in the console so I get that part of this report.

When I select None, you are expecting that the text turns back to black along with the background being white?

jazdw

jazdw commented on Mar 14, 2019

@jazdw

I generally work around this by using something like this, not ideal obviously.

<div md-colors="accent ? {color: 'accent'} : {}">Test test</div>
modified the milestones: 1.1.14, 1.1.15 on Mar 18, 2019
modified the milestones: 1.1.15, 1.1.16, 1.1.19 on Mar 29, 2019
modified the milestones: 1.1.19, - Backlog on May 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P4: minorMinor issues. May not be fixed without community contributions.type: enhancement

Type

No type

Projects

No projects

Relationships

None yet

    Development

    Participants

    @alirezamirian@Splaktar@jazdw

    Issue actions

      colors: add support for null or undefined values · Issue #11672 · angular/material