Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Incorrect behaviour for disabled fields with Polymer paper-input-decorator #901

Closed
Will-in-BC opened this issue Nov 9, 2014 · 1 comment
Closed

Incorrect behaviour for disabled fields with Polymer paper-input-decorator #901

Will-in-BC opened this issue Nov 9, 2014 · 1 comment

Comments

@Will-in-BC
Copy link

Hi,

I am using the latest build in the master branch.

I have several issues with disabled fields in paper-input-decorator. There is code at the end to illustrate the issues.

  1. to disable a field both <paper-input-decorator> and the enclosed <input> tags must be disabled. The former to catch the css selector :host.([disabled] and the latter to actually disable the field.
  2. even if both tags are disabled the behavior is not correct. In the case where disabled is specified on the tags a solid rather than dotted line appears. When disabled is set programmatically no underline is set.

I looked at the case where disabled is set on the tags. The reason the dotted appears not to be set is because unfocused-underline is still visible as well as the bottom border on the <div id='underline'>.

As an aside It might be useful to consider all of the states in which an input field could be found. You should be able to determine and set these states programmatically and style them for visual acuity -- paper input-decorator should support this. Some states to consider:

  • hidden
  • visible disabled valid
  • visible disabled invalid
  • visible enabled with_focus valid
  • visible enabled with_focus invalid
  • visible enabled without_focus valid
  • visible enabled without_foucs invalid

Here is the code to reproduce the issue. You will need to update the location of Polymer. Observe the disabled field then press the disable button to what happens when the first name field is disabled programmatically.

<!--
    Use the template tag to wrap your Polymer elements with data binding: Will Hopkins
  -->

  <!doctype html>
  <html>
  <head>

    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

    <title>paper-input</title>

<!--
    Update the following script and links to reflect your Polymer element locations
  -->



  <script src="/polymer/webcomponentsjs/webcomponents.js"></script>

  <link href="/polymer/font-roboto/roboto.html" rel="import">
  <link href="/polymer/paper-input/paper-input.html" rel="import">
  <link href="/polymer/paper-button/paper-button.html" rel="import">
  <link href="/polymer/paper-tabs/paper-tabs.html" rel="import">
  <link href="/polymer/core-ajax/core-ajax.html" rel="import">
  <link href="/polymer/core-pages/core-pages.html" rel="import">
  <link href="/polymer/core-input/core-input.html" rel="import">
<!--   <link href="/polymer/paper-autogrow-textarea.html" rel="import">
  <link href="/polymer/paper-input-decorator.html" rel="import">
-->

<style shim-shadowdom>

body {
  font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  margin: 0;
  padding: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
}

paper-input-decorator {
  max-width: 150px;
}


paper-input.narrow {
  width: 150px;
}


</style>

</head>
<div>
  <section>
  <template id="user-maintenance" is="auto-binding">
    <div>
      <paper-input-decorator class="disableWaitingforResponse" label="ID" floatingLabel id="paperID">
       <input is="core-input" class="disableWaitingforResponse" type=number value="{{iD}}" id="inputID"></input>
      </paper-input-decorator>
    </div>
    <div>
      <paper-input-decorator class="disableWaitingforResponse" label="First Name" floatingLabel id="paperFirstName">
        <input is="core-input" class="disableWaitingforResponse" value="{{firstName}}" id="inputFirstName"></input>
      </paper-input-decorator>
    </div>
    <div>
      <paper-input-decorator label="A disabled field" floatingLabel disabled>
        <input is="core-input" disabled value="{{disabledValue}}"></input>
      </paper-input-decorator>
    </div>
    <div>
      <paper-button raised class="disableWaitingforResponse" id="disableButton" on-tap="{{disableClicked}}">Disable</paper-button>
      <paper-button raised class="disableWaitingforResponse" id="enableButton" on-tap="{{enableClicked}}">Enable</paper-button>
      <paper-button raised class="disableWaitingforResponse" id="setvalueButton" on-tap="{{setvalueClicked}}">Set Value</paper-button>
    </div>
  </template>
  </section>

<script>
document.addEventListener('polymer-ready', function() {

  //
  // OK now lets get a handle to our template
  //
  var inlineBinding = document.getElementById('user-maintenance');

  // now we can set an input value

  inlineBinding.disabledValue = 13;

  // and handle events

  inlineBinding.disableClicked = function() {
    alert("Disable fired");
    document.querySelector('#inputFirstName').disabled=true;
    document.querySelector('#paperFirstName').disabled=true;
  }
  inlineBinding.enableClicked = function() {
    alert("Enabled fired:");
    document.querySelector('#inputFirstName').disabled=false;
    document.querySelector('#paperFirstName').disabled=false;
  }
  inlineBinding.setvalueClicked = function() {
    alert("Set Value fired");
    inlineBinding.firstName = "Fred";
    document.querySelector('#paperFirstName').updateLabelVisibility(true);
  }
});
</script>
</body>
@addyosmani
Copy link
Member

This issue was moved to googlearchive/paper-input#96

@addyosmani addyosmani mentioned this issue Nov 10, 2014
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@addyosmani @Will-in-BC