fix(input): clear button placeholder prevent clicking on actual component [#288] (#292)

* Fix: input clear button placeholder prevents clicking inside input #288

* changelog added

* Fix: input clear button placeholder prevents clicking inside input #288

* Fix: input clear button placeholder prevents clicking inside input #288

* TimePicer Fix #288

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 ### Fixes
 
 - Fix `n-date-picker` `n-provider` pass `date-locale` not work, closes [#250](https://github.com/TuSimple/naive-ui/issues/250).
+- Fix `n-input` clear button placeholder prevent clicking on actual component [#288](https://github.com/TuSimple/naive-ui/issues/288)
 
 ## 2.14.0 (2021-06-23)
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 ### Fixes
 
 - 修复 `n-date-picker` `n-provider` 传递 `date-locale` 属性无效，关闭 [#250](https://github.com/TuSimple/naive-ui/issues/250)
+- Fix `n-input` clear button placeholder prevent clicking on actual component [#288](https://github.com/TuSimple/naive-ui/issues/288)
 
 ## 2.14.0 (2021-06-23)
 

src/_internal/clear/src/Clear.tsx

@@ -31,7 +31,7 @@ export default defineComponent({
   render () {
     const { clsPrefix } = this
     return (
-      <div class={`${clsPrefix}-base-clear`} data-clear>
+      <div class={`${clsPrefix}-base-clear`}>
         <NIconSwitchTransition>
           {{
             default: () => {
@@ -42,6 +42,7 @@ export default defineComponent({
                   class={`${clsPrefix}-base-clear__clear`}
                   onClick={this.onClear}
                   onMousedown={this.handleMouseDown}
+                  data-clear
                 >
                   {{
                     default: () => <ClearIcon />

src/time-picker/src/TimePicker.tsx

@@ -57,6 +57,7 @@ import {
   Size,
   timePickerInjectionKey
 } from './interface'
+import { happensIn } from 'seemly'
 
 const timePickerProps = {
   ...(useTheme.props as ThemeProps<TimePickerTheme>),
@@ -297,6 +298,12 @@ export default defineComponent({
         transitionDisabledRef.value = false
       })
     }
+    function handleTriggerClick (e: MouseEvent): void {
+      if (props.disabled || happensIn(e, 'clear')) return
+      if (!activeRef.value) {
+        openPanel()
+      }
+    }
     function handleHourClick (hour: number): void {
       if (mergedValueRef.value === null) {
         doChange(getTime(setHours(startOfHour(new Date()), hour)))
@@ -533,6 +540,7 @@ export default defineComponent({
       handleTimeInputClear,
       handleFocusDetectorFocus,
       handleMenuKeyDown,
+      handleTriggerClick,
       mergedTheme: themeRef,
       triggerCssVars: computed(() => {
         const {
@@ -618,6 +626,7 @@ export default defineComponent({
                       onClear={this.handleTimeInputClear}
                       internalDeactivateOnEnter
                       internalForceFocus={this.active}
+                      onClick={this.handleTriggerClick}
                     >
                       {this.showIcon
                         ? {