Issue with Customization Combobox

[Kumar]

HI there,

 I am trying to build custom combobox which offers Add text inputbox, refer the pic for the reference,

 

 

with the help of below  example code.

					<ComboBox
						style={{
							width: '180px',
						}}
						id='newx'
						name='newX'
						textField='add new data'
						value={value}
						data={selectedval}
						onChange={(e) => handleChange(e, props)}
						header={
							<span
								style={{
									marginLeft: '60px',
								}}
							>
								<form className='k-form' onSubmit={(e) => e.preventDefault()}>
									<fieldset>
										{/* <div>Name</div> */}
										<TextBox
											value={selectedval}
											onChange={handleChangeval}
											// placeholder='John Smith'
											suffix={() => (
												<>
													{/* {value !== EMPTY_VALUE && ( */}
													<InputClearValue
														onClick={handleAddoperation}
														className={styles.plus}
													>
														<SvgIcon icon={plusIcon} />
													</InputClearValue>
													{/* )}
													 <InputSeparator /> */}
												</>
											)}
										/>
									</fieldset>
								</form>
							</span>
						}
						// footer={
						//   <span
						//     style={{
						//       marginLeft: '60px',
						//     }}
						//   >
						//     footer
						//   </span>
						// }
					/>

 

Issue encountered:

1. when i click on text input box inside combobox, options  popup closing. ( means i am not able to type or add new contents in text input box) 2. i am trying to implement this with incell. is there any other things to consider wrt Incell edit.

[Wissam]

Hi, Kumar,

Thank you for the provided code.

I created a StackBlitz example based on it, however, I was not able to reproduce the faced issue. Therefore, can you please update it until the issue is reproducible? Here is my test demo:

• https://stackblitz.com/edit/react-5u2z3w?file=app%2Fmain.jsx

Regards,
Wissam
Progress Telerik