[Bug Report] "Search" control in "FixedView" with "placehoder=true" loss focus while typing

[tiezhishizi]

问题出在哪个包

@taroify/core

问题出在哪个平台/设备/浏览器

H5

平台/设备/浏览器

No response

你正在使用的 Taroify 版本是多少

0.6.3-alpha.0

描述一下您遇到的问题以及重现步骤

Code:

function bottom_searchbox() {
  const [searchBarText, setSearchBarText] = React.useState<string>('');
  return (
      <FixedView position="bottom" placeholder={true}>
        <Search
          value={searchBarText}
          placeholder="Search"
          onSearch={handleSubmit}
          onChange={(ev) => {
            setSearchBarText(ev.detail.value)
          }}
        />
      </FixedView>)
}

repro steps：

1. 输入框中连续输入
2. 输入一个字母后，焦点消失，无法继续输入

console中输出警告

hook.js:608 Warning: flushSync was called from inside a lifecycle method. React cannot flush when React is already rendering. Consider moving this call to a scheduler task or micro task. Error Component Stack
at FixedView (fixed-view.js:26:1)
at App (main.tsx:59:1)
at div ()
at PageWrapper (connect.ts:112:1)
at App (app.ts:6:1)
at AppWrapper (connect.ts:223:1)
overrideMethod @ hook.js:608
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
flushSync$1 @ react-dom.development.js:29874
finishedEventHandler @ attachProps.js:70
eventStore. @ attachProps.js:99
emitEvent @ index.js:643
emit @ index.js:625
handleBlur @ taro-input-core.js:83
removeChild @ react-dom.development.js:11099
commitDeletionEffectsOnFiber @ react-dom.development.js:24067
recursivelyTraverseDeletionEffects @ react-dom.development.js:24028
commitDeletionEffectsOnFiber @ react-dom.development.js:24172
recursivelyTraverseDeletionEffects @ react-dom.development.js:24028
commitDeletionEffectsOnFiber @ react-dom.development.js:24157
recursivelyTraverseDeletionEffects @ react-dom.development.js:24028
commitDeletionEffectsOnFiber @ react-dom.development.js:24157
commitDeletionEffects @ react-dom.development.js:24015
recursivelyTraverseMutationEffects @ react-dom.development.js:24298
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24332
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24615
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24385
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24371
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24371
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24371
recursivelyTraverseMutationEffects @ react-dom.development.js:24312
commitMutationEffectsOnFiber @ react-dom.development.js:24471
commitMutationEffects @ react-dom.development.js:24282
commitRootImpl @ react-dom.development.js:26849
commitRoot @ react-dom.development.js:26721
performSyncWorkOnRoot @ react-dom.development.js:26156
flushSyncCallbacks @ react-dom.development.js:12042
flushSync @ react-dom.development.js:26240
flushSync$1 @ react-dom.development.js:29878
finishedEventHandler @ attachProps.js:70
eventStore. @ attachProps.js:99
emitEvent @ index.js:643
emit @ index.js:625
handleInput @ taro-input-core.js:60

如果可能的话，请包含一个代码框的链接与复制的问题

No response

你知道如何解决这个问题吗

None

您是否愿意参与修复这个问题，并创建一个 PR

None

修复这个问题的解决方案

前端小白做了一些调研：
问题可能在
use-height.ts

use-placeholder.tsx

const height = useHeight(contentRef, [children])
    return (
      <View
        className={classNames(className, classNameProp)}
        style={{
          ...style,
          height: height ? `${addUnitPx(height)}` : "",
        }}
        children={children}
        {...restProps}
      />
    )

个人理解是render过程中对一些控件计算高度，引起了新的状态变化，再次触发更新，非 Input 的控件可能不受影响，input控件会导致焦点变化（下面附copilot的分析）。
可能的修复： 将placeholder从包含FixedView children改成并列放在children下方render，然后设置z-index使之隐藏在children后面，这样是否能避免input的多次render，维持焦点。

Github copilot:

If the deps array passed to useHeight contains an input box, it could cause re-renders whenever the input value changes. This can lead to focus loss if the component re-renders while typing.

To mitigate this issue, you can try the following:

Ensure that the deps array only includes dependencies that are necessary for height calculation.
Avoid including the input box or its state directly in the deps array if possible.