Fixed #4474 - Calendar: focus state update

components/lib/calendar/BaseCalendar.vue

@@ -162,7 +162,8 @@ const classes = {
             'p-calendar-timeonly': props.timeOnly,
             'p-calendar-disabled': props.disabled,
             'p-inputwrapper-filled': props.modelValue,
-            'p-inputwrapper-focus': state.focused
+            'p-inputwrapper-focus': state.focused,
+            'p-focus': state.focused || state.overlayVisible
         }
     ],
     input: 'p-inputtext p-component',

public/themes/arya-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+  border-color: #64B5F6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/arya-green/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+  border-color: #81C784;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/arya-orange/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+  border-color: #FFD54F;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/arya-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/bootstrap4-dark-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f19ea6;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e3f3fe;
+  border-color: #8dd0ff;
+}
 
 .p-datepicker {
   padding: 0;

public/themes/bootstrap4-dark-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f19ea6;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #f0e6f5;
+  border-color: #c298d8;
+}
 
 .p-datepicker {
   padding: 0;

public/themes/bootstrap4-light-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #dc3545;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  border-color: #007bff;
+}
 
 .p-datepicker {
   padding: 0;

public/themes/bootstrap4-light-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #dc3545;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  border-color: #883cae;
+}
 
 .p-datepicker {
   padding: 0;

public/themes/fluent-light/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a4252c;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 1px #605e5c;
+  border-color: #0078d4;
+}
 
 .p-datepicker {
   padding: 0.75rem;

public/themes/lara-dark-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #FCA5A5;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(147, 197, 253, 0.5);
+  border-color: #93C5FD;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-dark-indigo/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #FCA5A5;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(165, 180, 252, 0.5);
+  border-color: #A5B4FC;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-dark-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #FCA5A5;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(196, 181, 253, 0.5);
+  border-color: #C4B5FD;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-dark-teal/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #FCA5A5;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem rgba(94, 234, 212, 0.5);
+  border-color: #5EEAD4;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-light-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e24c4c;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #BFDBFE;
+  border-color: #3B82F6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-light-indigo/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e24c4c;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #C7D2FE;
+  border-color: #6366F1;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-light-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e24c4c;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #DDD6FE;
+  border-color: #8B5CF6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/lara-light-teal/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e24c4c;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #99F6E4;
+  border-color: #14B8A6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/luna-amber/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #FFE082;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/luna-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #81D4FA;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/luna-green/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #C5E1A5;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/luna-pink/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e57373;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem white;
+  border-color: #F48FB1;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/md-dark-deeppurple/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #CE93D8;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/md-dark-indigo/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/md-light-deeppurple/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #673AB7;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/md-light-indigo/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/mdc-dark-deeppurple/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #CE93D8;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/mdc-dark-indigo/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44435;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #9FA8DA;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/mdc-light-deeppurple/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #673AB7;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/mdc-light-indigo/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #B00020;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: none;
+  border-color: #3F51B5;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/mira/theme.css

@@ -361,6 +361,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #BF616A;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #C0D0E0;
+  border-color: #81A1C1;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/nano/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #d8222f;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #90c9f5;
+  border-color: #1174c0;
+}
 
 .p-datepicker {
   padding: 0.25rem;

public/themes/nova-accent/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/nova-alt/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/nova-vue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #c2e9d8;
+  border-color: #41b883;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/nova/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #a80000;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #8dcdff;
+  border-color: #007ad9;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/rhea/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #e7a3a3;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #e4e9ec;
+  border-color: #7B95A3;
+}
 
 .p-datepicker {
   padding: 0.857rem;

public/themes/saga-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #a6d5fa;
+  border-color: #2196F3;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/saga-green/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #b7e0b8;
+  border-color: #4CAF50;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/saga-orange/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #ffe69c;
+  border-color: #FFC107;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/saga-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f44336;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.2rem #df9eea;
+  border-color: #9C27B0;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/soho-dark/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ff9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #e0d8fc;
+  border-color: #b19df7;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/soho-light/theme.css

@@ -357,6 +357,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ff6767;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #c7bbfa;
+  border-color: #7254f3;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/tailwind-light/theme.css

@@ -368,6 +368,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f0a9a7;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #6366F1;
+  border-color: #4F46E5;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/vela-blue/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #93cbf9;
+  border-color: #64B5F6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/vela-green/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #a7d8a9;
+  border-color: #81C784;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/vela-orange/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #ffe284;
+  border-color: #FFD54F;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/vela-purple/theme.css

@@ -333,6 +333,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #ef9a9a;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #cf95d9;
+  border-color: #BA68C8;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/viva-dark/theme.css

@@ -365,6 +365,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f78c79;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 1px #9eade6;
+  border-color: #9eade6;
+}
 
 .p-datepicker {
   padding: 0.5rem;

public/themes/viva-light/theme.css

@@ -365,6 +365,12 @@
 .p-calendar.p-invalid.p-component > .p-inputtext {
   border-color: #f88c79;
 }
+.p-calendar:not(.p-calendar-disabled).p-focus > .p-inputtext {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: 0 0 0 0.1rem #bbc7ee;
+  border-color: #91a4e3;
+}
 
 .p-datepicker {
   padding: 0.5rem;