Popup组件嵌套tabs组件，tabs组件内部嵌套form组件Form.Item包裹input时，输入框在聚焦时自动失去焦点，导致无法输入

[young-ren]

NutUI React 包名

@nutui/nutui-react

NutUI React 版本号

2.16.14

平台

weapp

重现链接

暂时无法提供

重现步骤

Popup组件嵌套tabs组件，tabs组件内部嵌套form组件Form.Item包裹input时，输入框在聚焦时自动失去焦点，导致无法输入

期望的结果是什么？

可以输入

实际的结果是什么？

无法输入

环境信息

3.6.33

其他补充信息

暂无

[nieyunliang]

我也碰到这个问题，Tabs内的Input组件，有值的时候就会失去焦点，没有值的时候没问题，我现在是用的Taro的Input代替的

[oasis-cloud]

https://github.com/oasis-cloud/nutui-react-taro3x-demo.git 在这个仓库中没复现出来，可以给这个仓库提交一个 demo 的 PR 吗？

[814351846]

https://github.com/oasis-cloud/nutui-react-taro3x-demo.git 在这个仓库中没复现出来，可以给这个仓库提交一个 demo 的 PR 吗？

版本 "@nutui/nutui-react-taro": "^2.6.14"

// page.tsx

import { FC, useRef, useState } from 'react'
import { View } from '@tarojs/components'

import { ConfigProvider, Swiper, Tabs } from '@nutui/nutui-react-taro'
import Create from './Create'

const AskForLeavePage: FC = () => {
	const swiperRef = useRef<React.ElementRef<typeof Swiper> | null>(null)
	const [tabIndex, setTabIndex] = useState<string | number>(0)
	return (
		<View className='bg-white'>
			<ConfigProvider
				theme={{
					nutuiFixednavButtonBackground: 'orange',
					nutuiTabsTitlesBackgroundColor: '#fff',
					nutuiTabsTabpanePadding: '0 0',
					nutuiTabsTitlesItemColor: '#333',
					nutuiTabsTitlesItemActiveColor: 'orange',
					nutuiTabsTitlesItemActiveBackgroundColor: 'orange',
					NutuiTabsTitlesFontSize: '28rpx',
					nutuiTabsTitlesItemActiveFontWeight: 'bold',
					nutuiTabsTabLineColor: 'orange',
					nutuiTabsLineBottom: '0%',
					nutuiTabsTabLineWidth: '110rpx',
				}}>
				<Tabs
					className='border border-t-0 border-b-2 border-l-0 border-r-0 border-gray-200 border-solid'
					value={tabIndex}
					autoHeight={true}
					onChange={(page) => {
						swiperRef.current?.to(page)
						setTabIndex(page)
					}}>
					<Tabs.TabPane title='发起提交' />
					<Tabs.TabPane title='查看数据' />
				</Tabs>
				<Swiper
					defaultValue={0}
					loop={false}
					height='calc(100vh - 48px)'
					ref={swiperRef}
					onChange={(e) => {
						setTabIndex(e.detail.current)
					}}>
					<Swiper.Item className='bg-gray-100'>
						<Create />
					</Swiper.Item>
					<Swiper.Item></Swiper.Item>
				</Swiper>
			</ConfigProvider>
		</View>
	)
}
export default AskForLeavePage

// Create.tsx

import { FC} from 'react'
import { View } from '@tarojs/components'
import {
	Button,
	ConfigProvider,
	Form,
	Input,
} from '@nutui/nutui-react-taro'

const Create: FC = () => {
	const [form] = Form.useForm()

	// 提交
	const onSubmitSuccess = async (values: any) => {
		console.log(`values:`, values)
	}

	return (
		<>
			<ConfigProvider
				className='px-4 bg-white'
				theme={{
					nutuiFormItemLabelFontSize: '30rpx',
					nutuiFormItemBodyFontSize: '30rpx',
				}}>
				<Form
					labelPosition='top'
					divider
					form={form}
					onFinish={(values) => onSubmitSuccess(values)}>
					<Form.Item
						align='flex-start'
						required
						label='请假事由'
						name='qksm'
						rules={[{ required: true, message: '请输入请假事由' }]}>
						<Input
							className='mt-2'
							placeholder='请输入请假事由'
							type='text'
						/>
					</Form.Item>
				</Form>
			</ConfigProvider>
		</>
	)
}
export default Create