Merge pull request #1706 from iamfaran/fix/tab-index-position

[Fix] Move tab-index position to the Interaction Section for better UX

Author: FalkWolsky

client/packages/lowcoder/src/comps/comps/dateComp/dateComp.tsx

@@ -326,6 +326,7 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
               {showDataLoadingIndicatorsPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
           </>
         )}
@@ -344,7 +345,6 @@ const DatePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           <><Section name={sectionNames.advanced}>
             {timeFields(children, isMobile)}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section></>
         )}
         {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && !isMobile && commonAdvanceSection(children)}
@@ -543,6 +543,7 @@ let DateRangeTmpCmp = (function () {
                 {disabledPropertyView(children)}
                 {hiddenPropertyView(children)}
                 {showDataLoadingIndicatorsPropertyView(children)}
+                {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
               </Section>
             </>
           )}
@@ -560,7 +561,6 @@ let DateRangeTmpCmp = (function () {
             <><Section name={sectionNames.advanced}>
               {timeFields(children, isMobile)}
               {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section></>
           )}
           {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && commonAdvanceSection(children)}

client/packages/lowcoder/src/comps/comps/dateComp/timeComp.tsx

@@ -250,6 +250,7 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           {disabledPropertyView(children)}
           {hiddenPropertyView(children)}
           {showDataLoadingIndicatorsPropertyView(children)}
+          {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
         </Section></>
       )}
 
@@ -266,7 +267,6 @@ const TimePickerTmpCmp = new UICompBuilder(childrenMap, (props) => {
           {commonAdvanceSection(children)}
           {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
           {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-          {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
         </Section>
       )}
 
@@ -428,6 +428,7 @@ const TimeRangeTmpCmp = (function () {
             {disabledPropertyView(children)}
             {hiddenPropertyView(children)}
             {showDataLoadingIndicatorsPropertyView(children)}
+            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section></>
         )}
 
@@ -444,7 +445,6 @@ const TimeRangeTmpCmp = (function () {
             {commonAdvanceSection(children)}
             {children.use12Hours.propertyView({ label: trans("prop.use12Hours") })}
             {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
-            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
         )}
 

client/packages/lowcoder/src/comps/comps/numberInputComp/numberInputComp.tsx

@@ -438,6 +438,7 @@ let NumberInputTmpComp = (function () {
               {children.onEvent.getPropertyView()}
               {disabledPropertyView(children)}
               {hiddenPropertyView(children)}
+              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
             </Section>
           </>
         )}
@@ -458,7 +459,6 @@ let NumberInputTmpComp = (function () {
             })}
             {children.controls.propertyView({ label: trans("numberInput.controls") })}
             {readOnlyPropertyView(children)}
-            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
         )}
 

client/packages/lowcoder/src/comps/comps/numberInputComp/rangeSliderComp.tsx

@@ -88,7 +88,6 @@ const RangeSliderBasicComp = (function () {
               tooltip: trans("rangeSlider.stepTooltip"),
             })}
             {children.vertical.propertyView({ label: trans("slider.vertical") })}
-            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
 
           <SliderPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderComp.tsx

@@ -68,7 +68,6 @@ const SliderBasicComp = (function () {
               tooltip: trans("slider.stepTooltip"),
             })}
             {children.vertical.propertyView({ label: trans("slider.vertical") })}
-            {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
           </Section>
           <FormDataPropertyView {...children} />
           <SliderPropertyView {...children} />

client/packages/lowcoder/src/comps/comps/numberInputComp/sliderCompConstants.tsx

@@ -104,6 +104,7 @@ const InteractionSection = memo(({ children }: { children: RecordConstructorToCo
       {disabledPropertyView(children)}
       {hiddenPropertyView(children)}
       {showDataLoadingIndicatorsPropertyView(children as any)}
+      {(children as any).tabIndex?.propertyView({ label: trans("prop.tabIndex") })}
     </Section>
   );
 });

client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx

@@ -65,7 +65,7 @@ export const getStyle = (style: CheckboxStyleType) => {
         }
       }
       
-      .ant-checkbox-inner) {
+      .ant-checkbox-inner {
         background-color: ${style.uncheckedBackground};
         border-radius: ${style.radius};
         border-color: ${style.checkedBorder};

client/packages/lowcoder/src/comps/comps/selectInputComp/radioCompConstants.tsx

@@ -74,10 +74,9 @@ export const RadioPropertyView = (
         {disabledPropertyView(children)}
         {hiddenPropertyView(children)}
         {showDataLoadingIndicatorsPropertyView(children as any)}
-      </Section>
-      <Section name={sectionNames.advanced}>
         {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
-      </Section></>
+      </Section>
+      </>
     )}
 
     {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (

client/packages/lowcoder/src/comps/comps/textInputComp/inputComp.tsx

@@ -103,7 +103,6 @@ let InputBasicComp = new UICompBuilder(childrenMap, (props) => {
               {children.prefixIcon.propertyView({ label: trans("button.prefixIcon") })}
               {children.suffixIcon.propertyView({ label: trans("button.suffixIcon") })}
               {children.showCount.propertyView({ label: trans("prop.showCount") })}
-              {children.tabIndex.propertyView({ label: trans("prop.tabIndex") })}
               {allowClearPropertyView(children)}
               {readOnlyPropertyView(children)}
             </Section>

client/packages/lowcoder/src/comps/comps/textInputComp/textInputConstants.tsx

@@ -275,6 +275,7 @@ export const TextInputInteractionSection = (children: TextInputComp) => (
     {children.onEvent.getPropertyView()}
     {disabledPropertyView(children)}
     {showDataLoadingIndicatorsPropertyView(children as any)}
+    {(children as any).tabIndex?.propertyView({ label: trans("prop.tabIndex") })}
   </Section>
 );
 
@@ -308,7 +309,6 @@ export function getStyle(style: InputLikeStyleType, labelStyle?: LabelStyleType)
       text-decoration:${style.textDecoration};
       background-color: ${style.background};
       border-color: ${style.border};
-      // line-height: ${style.lineHeight};
 
       &:focus,
       &.ant-input-affix-wrapper-focused {