CODEWITHSUNDEEP
angularbootstrap-4primeng
Tuxedo Joe
Tuxedo Joe

Reputation: 962

How can I get CSS focus working with PrimeNG textarea?

I can't get this CSS hovering to work in my PrimeNG textarea.

Here's my CSS. The invalid functions work but not the hovering.

.is-invalid {
  .ql-toolbar.ql-snow {
    border: 1px solid $red !important;
    border-radius: 0;

  }

  .ql-toolbar.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }

  .ql-container.ql-snow {
    border: 1px solid $red !important;
    border-top: 0px !important;

  }

  .ql-container.ql-snow:focus {
    -webkit-box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    box-shadow: 0 0 0 .12rem rgba(226, 28, 80, .25) !important;
    background: #fefafa;
  }
}

And here's my html, kicking in the PrimeNG element:

<p-editor [ngClass]="{'editor': true,
                      'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                      'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
          [(ngModel)]="foretagsprofil.omoss"
          formControlName="omoss"
          placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
          [style]="{'height':'350px', 'width':'100%'}"
          [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
  <p-header tabindex="0">
    <span ngClass="ql-formats">
      <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
      <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
    </span>
  </p-header>
</p-editor>

Upvotes: 2

Views: 979

Answers (1)

Hana Wujira
Hana Wujira

Reputation: 880

since the p-editor is based on the quill js library you can get access to the quill library through the editor component to call the focus function like this

in html 

 <p-editor #textEditor [ngClass]="{'editor': true,
                              'is-invalid': form.get('omoss').invalid && form.get('omoss').touched,
                              'is-valid': form.get('omoss').dirty && form.get('omoss').valid}"
                  [(ngModel)]="foretagsprofil.omoss"
                  formControlName="omoss"
                  placeholder="Skriv en intresseväckande beskrivning av företaget (max 1000 tecken)."
                  [style]="{'height':'350px', 'width':'100%'}"
                  [attr.aria-invalid]="form.get('omoss').invalid && form.get('omoss').touched" tabindex="0">
          <p-header tabindex="0">
            <span ngClass="ql-formats">
              <button ngClass="ql-bold" aria-label="Fet" title="Fet"></button>
              <button ngClass="ql-italic" aria-label="Kursiv" title="Kursiv"></button>
            </span>
          </p-header>
        </p-editor>

in component.ts

 import { ViewChild } from '@angular/core';
    @ViewChild('textEditor') textEditor: Editor;
     quill: any;
    ngOnInit(){
       this.quill = this.textEditor.getQuill();
       this.quill.focus();
    }

Upvotes: 1

Related Questions