shubhadip / vuejs3-datepicker

vue 3 datepicker. supports disabling, highlighting of dates and programmatic access of date.
https://vuejs3-datepicker.netlify.app/
MIT License
70 stars 43 forks source link

vue warning using typeable attribute #39

Closed glenna-m closed 2 years ago

glenna-m commented 2 years ago

If I use the typeable attribute, I am seeing the following vue warning:

_[Vue warn]: Extraneous non-props attributes (class) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <IconView class="vuejs3-datepicker__typeablecalendar" color="#333" width=16  ... > 
  at <DateInput selectedDate= Thu Jul 01 2021 16:05:30 GMT-0700 (Pacific Daylight Time) resetTypedDate= Fri Jul 01 2022 16:05:30 GMT-0700 (Pacific Daylight Time) format="yyyy-MM-dd"  ... > 
  at <Datepicker modelValue= Thu Jul 01 2021 16:05:30 GMT-0700 (Pacific Daylight Time) onUpdate:modelValue=fn name="starts"  ... > 
  at <ExtractCreate onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>_

My template looks like this:

    <Datepicker v-model="starts" name="starts" placeholder="Select Date" iconColor="#333"
                              :disabled-dates="disabledStartDates" format="yyyy-MM-dd" :open-date="starts"
                              :typeable="true" :wrapper-class="calendar />

If I remove the typeable attribute, I no longer see this warning.

I took a look at the source and it looks to me like this may be the problem: In components/datepicker/DateInput.vue line 20:

        <IconView
          class="vuejs3-datepicker__typeablecalendar"
          :color="iconColor"
          :width="iconWidth"
          :height="iconHeight"
        /> 

Do you need to add a : in front of class?

shubhadip commented 2 years ago

@glenna-m https://github.com/shubhadip/vuejs3-datepicker/commit/384655fd431a31c2110e01fdc653d1d7e83d2118 this should fix your issue, please install v1.0.7 version