No options on how to remove the clear button on the TextInput component?

[DSvinka]

No options on how to remove the clear button on the TextInput component?

This button is causing issues for me while styling the login page in my application. It enlarges along with the text, resulting in very little space. Reducing the text size is not an option as it would require scaling the entire design.

The following styles are applied to the my TextInput:

textInput: {
    borderStyle: 'solid',
    borderWidth: 7,
    borderColor: '#2C2C2C',
    fontSize: 65,
    textAlign: 'center',
    color: '#FFFFFF',
    textShadowColor: 'rgba(0, 0, 0, 0.25)',
    backgroundColor: '#1C1A1A',
}

The clearButtonMode={"never"} parameter doesn't help.

[chrisglein]

I believe this is a relevant issue for you: #4080
Had you tried clearButtonMode and had it not work? Or were looking for that prop?

[josetr]

@chrisglein I just tried clearButtonMode, and it doesn't work.

@DSvinka is textAlign: center actually working for you? because I can't get it to work. I'm using 'react-native-windows' 0.73.4.

Maybe it works if I were to use --useWinUI3?

[kentng201]

Here is the solution to remove the "clear all" button for all text input

1. Go to node_modules/react-native-windows/Microsoft.ReactNative/Views/TextInputViewManager.cpp
2. Find the function call XamlView TextInputViewManager::CreateViewCore
3. Add a new function, FindChildByName in the above

template <typename T>
T FindChildByName(winrt::DependencyObject parent, const std::wstring& name) {
  int count = winrt::VisualTreeHelper::GetChildrenCount(parent);
  for (int i = 0; i < count; i++) {
    auto child = winrt::VisualTreeHelper::GetChild(parent, i);
    if (auto namedChild = child.try_as<T>()) {
      if (namedChild.Name() == name) {
        return namedChild;
      }
    }
    // Recursively search child elements
    auto result = FindChildByName<T>(child, name);
    if (result) {
      return result;
    }
  }
  return nullptr;
}

4. Modify the else clause to remove clear all button when Loaded

textBox.Loaded([textBox](auto&&, auto&&) {
        auto clearButton = FindChildByName<winrt::Button>(textBox, L"DeleteButton");
        if (clearButton) {
          auto parentGrid = clearButton.Parent().try_as<winrt::Grid>();
          if (parentGrid) {
            auto children = parentGrid.Children();
            unsigned int index;
            if (children.IndexOf(clearButton, index)) {
              children.RemoveAt(index);
            }
          }
        }
      });

The final function shall be look like this

template <typename T>
T FindChildByName(winrt::DependencyObject parent, const std::wstring& name) {
  int count = winrt::VisualTreeHelper::GetChildrenCount(parent);
  for (int i = 0; i < count; i++) {
    auto child = winrt::VisualTreeHelper::GetChild(parent, i);
    if (auto namedChild = child.try_as<T>()) {
      if (namedChild.Name() == name) {
        return namedChild;
      }
    }
    // Recursively search child elements
    auto result = FindChildByName<T>(child, name);
    if (result) {
      return result;
    }
  }
  return nullptr;
}

XamlView TextInputViewManager::CreateViewCore(
    int64_t /*tag*/,
    const winrt::Microsoft::ReactNative::JSValueObject &props) {
  const auto secureTextEntry = props.find("secureTextEntry");
  if (secureTextEntry != props.end() &&
      secureTextEntry->second.Type() == winrt::Microsoft::ReactNative::JSValueType::Boolean &&
      secureTextEntry->second.AsBoolean()) {
    xaml::Controls::PasswordBox passwordBox;
    return passwordBox;
  } else {
    xaml::Controls::TextBox textBox;

    textBox.Loaded([textBox](auto&&, auto&&) {
        auto clearButton = FindChildByName<winrt::Button>(textBox, L"DeleteButton");
        if (clearButton) {
          auto parentGrid = clearButton.Parent().try_as<winrt::Grid>();
          if (parentGrid) {
            auto children = parentGrid.Children();
            unsigned int index;
            if (children.IndexOf(clearButton, index)) {
              children.RemoveAt(index);
            }
          }
        }
      });

    return textBox;
  }
}